/*
 * Fancy A Deal — the actual stylesheet.
 *
 * This lives outside style.css because Storefront enqueues a child theme's
 * style.css as `storefront-style`, which loads BEFORE its own WooCommerce
 * styles — so anything written there is overridden by the parent it is
 * meant to override. Loading it from here, after those styles, is the only
 * ordering that works.
 */

/* ══════════════════════════════════════════════════════════════════════════
   Design tokens

   Gold and white, with near-black text. Gold is an accent colour: at 4.5:1 it
   fails contrast as text on white, so it carries buttons and highlights while
   words stay near-black. The navy comes from the logo and grounds the palette.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gold:        #c8a951;
  --gold-deep:   #a8872f;
  --gold-tint:   #faf4e4;
  --gold-line:   #e8dcb8;

  --navy:        #1a2f5a;
  --ink:         #14171a;
  --ink-soft:    #4b5563;
  --ink-muted:   #8b929c;

  --paper:       #ffffff;
  --surface:     #fbfaf7;
  --line:        #ebe9e4;

  --good:        #0f7b47;
  --warn:        #8a5a00;

  --radius:      14px;
  --radius-sm:   10px;
  --radius-pill: 999px;

  --shadow:      0 1px 2px rgb(20 23 26 / 6%), 0 8px 24px rgb(20 23 26 / 6%);
  --shadow-lift: 0 2px 6px rgb(20 23 26 / 8%), 0 16px 40px rgb(20 23 26 / 10%);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   Base — undo Storefront's defaults
   ══════════════════════════════════════════════════════════════════════════ */

body,
body.woocommerce,
.site {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body .site-content,
body .col-full {
  max-width: 1360px;
  padding-left: 20px;
  padding-right: 20px;
}

h1, h2, h3, h4,
.entry-title,
.product_title {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-deep); }

/* Storefront paints its own accent everywhere; neutralise it. */
body .site-header,
body .storefront-primary-navigation,
body .secondary-navigation {
  background: var(--paper);
}

/* ══════════════════════════════════════════════════════════════════════════
   Header — logo, a search box that means it, account and basket
   ══════════════════════════════════════════════════════════════════════════ */

body .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 92%);
  backdrop-filter: saturate(180%) blur(12px);
}

.fad-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}

.fad-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.fad-brand img {
  width: 38px;
  height: 38px;
  display: block;
}

.fad-brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.fad-brand-name em {
  font-style: normal;
  color: var(--gold-deep);
}

/* Search is the primary way people find things in a mixed catalogue, so it
   gets the middle of the header rather than a corner. */
.fad-search {
  flex: 1 1 auto;
  max-width: 620px;
}

.fad-search form {
  position: relative;
  display: block;
  margin: 0;
}

.fad-search input[type="search"] {
  width: 100%;
  height: 46px;
  padding: 0 52px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.fad-search input[type="search"]:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgb(200 169 81 / 18%);
}

.fad-search button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 0;
  cursor: pointer;
}

.fad-search button::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: no-repeat center / 16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171a' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.fad-search button:hover { background: var(--gold-deep); }

.fad-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.fad-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.fad-action:hover { background: var(--surface); color: var(--ink); }

.fad-action--basket {
  background: var(--gold);
  color: var(--ink);
}

.fad-action--basket:hover { background: var(--gold-deep); color: var(--ink); }

.fad-action-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Storefront's own header furniture is replaced by the above. */
body .site-branding,
body .site-search,
body .site-header-cart,
body .storefront-primary-navigation .main-navigation,
body .site-header .custom-logo-link {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Category rail — the shop's spine. Scrolls sideways on small screens.
   ══════════════════════════════════════════════════════════════════════════ */

.fad-rail {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.fad-rail-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.fad-rail-inner::-webkit-scrollbar { display: none; }

.fad-chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all .15s;
}

.fad-chip:hover,
.fad-chip[aria-current="true"] {
  border-color: var(--gold);
  background: var(--gold-tint);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero and category tiles — the front page
   ══════════════════════════════════════════════════════════════════════════ */

.fad-hero {
  margin: 28px 0 8px;
  padding: 44px 40px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 88% 8%, rgb(200 169 81 / 22%) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--gold-line);
}

.fad-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  max-width: 18ch;
}

.fad-hero p {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* Storefront centres this header and pads it by ~96px, which opens a hole
   between the category tiles and the product grid. Its selector is
   `.storefront-full-width-content .woocommerce-products-header`, so the class
   has to appear here too or the rule loses on specificity. */
body.storefront-full-width-content .woocommerce-products-header,
body .woocommerce-products-header {
  padding: 0;
  margin: 0;
  text-align: left;
}

body .storefront-sorting {
  margin-bottom: 18px;
}

.fad-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 14px;
}

.fad-section-head h2 {
  margin: 0;
  font-size: 1.32rem;
}

.fad-section-head a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-deep);
}

.fad-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Until categories carry their own images these are compact labels rather than
   tall empty boxes — a big blank tile reads as a missing picture. */
.fad-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold-tint) 0%, var(--surface) 62%);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.fad-tile:has(img) {
  justify-content: flex-end;
  min-height: 150px;
}

.fad-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
}

.fad-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.fad-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(20 23 26 / 62%) 0%, transparent 58%);
  opacity: 0;
  transition: opacity .15s;
}

.fad-tile:has(img)::after { opacity: 1; }

.fad-tile-label {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.fad-tile:has(img) .fad-tile-label { color: #fff; }

.fad-tile-count {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.fad-tile:has(img) .fad-tile-count { color: rgb(255 255 255 / 78%); }

/* ══════════════════════════════════════════════════════════════════════════
   Product grid — portrait cards, image first, price loud
   ══════════════════════════════════════════════════════════════════════════ */

body .site-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body ul.products::before,
body ul.products::after { content: none; }

body ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  padding: 0;
  text-align: left;
}

body ul.products li.product a img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 0 10px;
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow .15s;
}

body ul.products li.product:hover a img {
  box-shadow: var(--shadow-lift);
}

.fad-card-media {
  position: relative;
  display: block;
}

.fad-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: 0 1px 3px rgb(20 23 26 / 12%);
}

.fad-card-badge--new { color: var(--good); }
.fad-card-badge--caution { color: var(--warn); }

.fad-card-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  margin: 0 0 2px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fad-card-meta {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

body ul.products li.product .price {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

body ul.products li.product .price del {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-right: 5px;
}

body ul.products li.product .price ins {
  text-decoration: none;
  color: var(--good);
}

/* The catalogue is for browsing; buying happens on the product page. Hiding
   the loop button keeps every card the same height and the grid calm. */
body ul.products li.product .button,
body ul.products li.product .added_to_cart {
  display: none;
}

body ul.products li.product .fad-affiliate-button {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid var(--navy) !important;
  border-radius: var(--radius-pill);
  background: transparent !important;
  color: var(--navy) !important;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   Shop layout — filters beside the grid
   ══════════════════════════════════════════════════════════════════════════ */

/* Two columns only where filters are actually rendered. The class is added by
   the theme in the same condition that prints them, so the two cannot disagree.
   minmax(0,1fr) rather than 1fr: a wide product grid in an auto-sized column
   pushes the whole page sideways. */
body.fad-has-filters .site-content .col-full {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Storefront clears its floats with ::before and ::after on .col-full. In a
   grid those pseudo-elements become grid items, taking the first cell and
   pushing the filters into the products column. */
body.fad-has-filters .site-content .col-full::before,
body.fad-has-filters .site-content .col-full::after {
  display: none;
}

/* WooCommerce also drops an empty notices wrapper between the filters and the
   products. Left to auto-placement it eats a cell and wraps the grid, so the
   three children are placed by hand: notices across the top, then filters
   beside products. */
/* Rows are pinned as well as columns. Auto-placement never backtracks, so the
   full-width notices wrapper sitting between the two opened a third row and
   pushed the products below the filters instead of beside them. */
body.fad-has-filters .site-content .col-full > .woocommerce {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.fad-has-filters .fad-filters {
  grid-column: 1;
  grid-row: 2;
}

body.fad-has-filters .site-content #primary {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 900px) {
  body.fad-has-filters .site-content .col-full > .woocommerce,
  body.fad-has-filters .fad-filters,
  body.fad-has-filters .site-content #primary {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 900px) {
  body.fad-has-filters .site-content .col-full {
    grid-template-columns: minmax(0, 1fr);
  }
}

body .site-content .content-area,
body .site-content #primary {
  width: auto;
  float: none;
  min-width: 0;
}

.fad-filters {
  position: sticky;
  top: 96px;
  padding: 0;
  font-size: 0.9rem;
}

.fad-filters h3 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fad-filter-group {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.fad-filter-group:first-child { padding-top: 0; }

.fad-filter-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 232px;
  overflow-y: auto;
}

.fad-filter-group li { margin: 0 0 2px; }

.fad-filter-group li a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.fad-filter-group li a:hover { background: var(--surface); color: var(--ink); }

.fad-filter-group li.chosen a {
  background: var(--gold-tint);
  color: var(--ink);
  font-weight: 650;
}

.fad-filter-group li .count { color: var(--ink-muted); font-size: 0.8rem; }

body .woocommerce-result-count { color: var(--ink-muted); font-size: 0.88rem; }

body .woocommerce-ordering select,
body select,
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
}

body input:focus,
body select:focus,
body textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgb(200 169 81 / 16%);
}

/* ══════════════════════════════════════════════════════════════════════════
   Product page
   ══════════════════════════════════════════════════════════════════════════ */

body .single-product div.product .product_title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 8px;
}

body .single-product div.product p.price,
body .single-product div.product span.price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

body .single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--radius);
}

.fad-condition {
  display: inline-block;
  padding: 5px 13px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.fad-condition--new { color: var(--good); border-color: currentColor; }
.fad-condition--caution { color: var(--warn); border-color: currentColor; }

.fad-affiliate-notice {
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-tint);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.fad-affiliate-notice a { color: var(--gold-deep); font-weight: 650; text-decoration: underline; }

body .shop_attributes th { color: var(--ink-soft); font-weight: 600; }
body .shop_attributes td { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════════ */

body .button,
body button.button,
body input.button,
body a.button,
body .woocommerce-Button,
body #respond input#submit,
body .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none;
  transition: background .15s, transform .1s;
}

body .button:hover,
body button.button:hover,
body input.button:hover,
body a.button:hover,
body #respond input#submit:hover {
  background: var(--gold-deep);
  color: var(--ink);
}

body .button:active { transform: translateY(1px); }

body .button.alt,
body button.button.alt,
body .single_add_to_cart_button {
  background: var(--ink);
  color: #fff;
}

body .button.alt:hover,
body .single_add_to_cart_button:hover {
  background: #000;
  color: #fff;
}

body .quantity .qty {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Notices, cart, checkout, account
   ══════════════════════════════════════════════════════════════════════════ */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-tint);
  color: var(--ink);
  padding: 14px 18px;
}

body .woocommerce-error { border-left-color: #b3261e; background: #fdf1f0; }

body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before { color: var(--gold-deep); }

body table.shop_table,
body table.cart {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

body table.shop_table th {
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 600;
}

body .woocommerce-MyAccount-navigation li.is-active a,
body .woocommerce-MyAccount-navigation li a:hover {
  background: var(--gold-tint);
  color: var(--ink);
}

body .woocommerce-breadcrumb {
  padding: 16px 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

body .woocommerce-breadcrumb a { color: var(--ink-soft); }

body .storefront-breadcrumb {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════════ */

body .site-footer {
  margin-top: 64px;
  padding: 40px 0 28px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

body .site-footer a { color: var(--ink-soft); }
body .site-footer a:hover { color: var(--gold-deep); }

.fad-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.fad-footer-note { margin: 0; color: var(--ink-muted); font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Small screens
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .fad-bar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    min-height: 0;
  }

  .fad-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }

  .fad-action span { display: none; }
  .fad-action { padding: 0 12px; }
  .fad-action--basket span { display: inline; }

  .fad-hero { padding: 28px 22px; }

  body .site-main ul.products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px 12px;
  }
}