/*
Theme Name: The Fratellis' Tales
Description: A generic theme for the site.
Version: 0.1.15
Requires at least: 6.4
Requires PHP: 7.0
Text Domain: fratellis-tales
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:wght@400;500;600;700&display=swap');

body {
  background-color: #111 !important;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(125deg, rgba(255,255,255,.018), transparent 32%);
  background-size: 4px 4px, auto;
}

.wp-site-blocks { overflow: hidden; }
.wp-site-blocks a,
.wp-site-blocks a:visited { color: #d4cec2; }
.wp-site-blocks a:hover,
.wp-site-blocks a:focus { color: #a94f45; }

.ft-header { border-bottom: 1px solid rgba(212,206,194,.18); }
.ft-header .wp-block-site-title a { color: #d4cec2; text-decoration: none; }
.ft-header .wp-block-site-title { letter-spacing: .03em; }
.ft-logo {
  box-sizing: content-box;
  display: block;
  padding-right: 1rem;
  width: clamp(12rem, 18vw, 18rem);
}
.ft-logo img { display: block; height: auto; width: 100%; }
.ft-kicker, .ft-section-title, .ft-footer-heading {
  font-family: "Bebas Neue", Impact, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ft-kicker { color: #c7bca9; font-size: 1rem; }
.ft-kicker::before, .ft-kicker::after { color: #a94f45; content: "★"; margin: 0 .6rem; }
.ft-welcome { border: 1px solid rgba(212,206,194,.2); border-top: 0; }
.ft-welcome-copy { padding: clamp(2rem, 5vw, 5rem); }
.ft-welcome-copy h1, .ft-section-title { color: #d4cec2; }
.ft-welcome-copy h1::after, .ft-section-title::after, .ft-footer-heading::after {
  background: #a94f45; content: ""; display: block; height: 3px; margin-top: .5rem; width: 3rem;
}
.ft-hero-image img { display: block; filter: grayscale(1) contrast(1.08); height: 100%; min-height: 390px; object-fit: cover; width: 100%; }
.ft-rail { border: 1px solid rgba(212,206,194,.2); border-top: 0; }
.ft-rail .wp-block-button { border-right: 1px solid rgba(212,206,194,.2); flex: 1; margin: 0; }
.ft-rail .wp-block-button:last-child { border-right: 0; }
.ft-rail .wp-block-button__link { background: transparent; color: #d4cec2; font-family: "Bebas Neue", Impact, sans-serif; font-size: 1.2rem; letter-spacing: .08em; padding: 1.35rem 1rem; width: 100%; }
.ft-rail .wp-block-button__link:hover { background: #a94f45; color: #111; }
.ft-updates { border: 1px solid rgba(212,206,194,.2); }
.ft-update-row {
  align-items: center !important;
  border-bottom: 1px solid rgba(212,206,194,.15);
  display: grid !important;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 8rem 7rem;
  padding: 1rem 1.8rem;
}
.ft-update-row:last-child { border-bottom: 0; }
.ft-update-row .wp-block-post-title { font-family: "Josefin Sans", sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0; }
.ft-updates .wp-block-post-title,
.ft-updates .wp-block-post-title a,
.ft-updates .wp-block-post-title a:visited {
  color: #d4cec2 !important;
  text-decoration: none;
}
.ft-updates .wp-block-post-title a:hover,
.ft-updates .wp-block-post-title a:focus { color: #a94f45 !important; text-decoration: underline; }
.ft-update-row .wp-block-post-title::before { color: #a94f45; content: "▱"; font-size: 1.55rem; margin-right: 1rem; vertical-align: -0.1em; }
.ft-update-row .wp-block-post-date { color: #c7bca9; white-space: nowrap; }
.ft-update-row .wp-block-post-terms a { color: #a94f45; text-decoration: none; }
.ft-footer { border-top: 1px solid rgba(212,206,194,.18); color: #c7bca9; }
.ft-footer a { color: #d4cec2; }

/* WooCommerce product-category pages use the Product Collection block rather
   than the legacy ul.products markup. Keep this archive comfortably centred
   and use smaller, consistent cover-art cards. */
.tax-product_cat main > .alignwide {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1240px !important;
  width: calc(100% - 4rem);
}
.tax-product_cat .wc-block-product-template {
  display: grid !important;
  gap: 1.5rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tax-product_cat .wc-block-product-template > .wc-block-product {
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}
.tax-product_cat .wc-block-product-template .wc-block-components-product-image img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100% !important;
}

/* Individual download pages use WooCommerce's legacy product template.
   Apply the same calm, contained reading width without changing the product
   data or the Download Now controls. */
.single-product main.wp-block-group {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1240px !important;
  width: calc(100% - 4rem);
}
.single-product .woocommerce div.product {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}
.single-product .woocommerce div.product div.images,
.single-product .woocommerce div.product div.summary {
  float: none;
  margin: 0;
  width: auto;
}
.single-product .woocommerce div.product .woocommerce-tabs,
.single-product .woocommerce div.product .related,
.single-product .woocommerce div.product .upsells {
  grid-column: 1 / -1;
}
.single-product .woocommerce-product-gallery img {
  height: auto;
  max-width: 100%;
}

@media (max-width: 782px) {
  .ft-logo { width: 12rem; }
  .ft-hero-image img { min-height: 240px; }
  .ft-rail .wp-block-button { border-bottom: 1px solid rgba(212,206,194,.2); border-right: 0; flex-basis: 50%; }
  .ft-update-row { align-items: flex-start !important; grid-template-columns: 1fr; gap: .35rem; }
  .tax-product_cat main > .alignwide { width: calc(100% - 2rem); }
  .tax-product_cat .wc-block-product-template { gap: 1rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .single-product main.wp-block-group { width: calc(100% - 2rem); }
  .single-product .woocommerce div.product { gap: 2rem; grid-template-columns: 1fr; }
}

@media (min-width: 783px) and (max-width: 1100px) {
  .tax-product_cat .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}