/* ==========================================================================
   BlackTop & Co — brand stylesheet
   Loaded by the BlackTop & Co Brand Kit plugin. Do not paste this into
   Additional CSS as well, or you'll load it twice.

   Colours, hero images and corner radius are controlled from
   Dashboard -> BlackTop Brand. The variables in section 2 are defaults only:
   the plugin writes over them with whatever you saved on that screen.

   Fonts are enqueued by the plugin (toggleable in settings), so there is
   no @import here.

   The rule this file follows: dark is the room, gold is the light in it.
   Gold appears on hairlines, small-caps labels, prices, hovers and one
   button style - never as a background fill for large areas.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2. TOKENS
   Change a colour here and it changes everywhere. Don't hardcode hex values
   further down the file.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --btc-ink:        #0B0B0B;   /* page */
  --btc-coal:       #141414;   /* cards, header, footer */
  --btc-smoke:      #1B1B1B;   /* hover surface */
  --btc-line:       #262626;   /* default borders */

  /* Gold */
  --btc-gold:       #C9A84C;
  --btc-gold-lift:  #E0C069;   /* hover — lighter, never darker */
  --btc-gold-sink:  #9C7F32;   /* pressed */
  --btc-gold-line:  rgba(201, 168, 76, 0.32);  /* hairlines */
  --btc-gold-wash:  rgba(201, 168, 76, 0.08);  /* faint tints */

  /* Text */
  --btc-bone:       #EDE9E2;   /* body */
  --btc-mute:       #9A968E;   /* secondary, captions */
  --btc-faint:      #6B6862;   /* disabled, meta */

  /* Type */
  --btc-display:    'Bebas Neue', 'Oswald', Impact, sans-serif;
  --btc-body:       'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* Motion */
  --btc-ease:       cubic-bezier(0.2, 0.7, 0.3, 1);
  --btc-fast:       160ms;
  --btc-slow:       420ms;

  /* Shape */
  --btc-radius:     0px;
}


/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
body {
  background-color: var(--btc-ink);
  color: var(--btc-bone);
  font-family: var(--btc-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.site-content,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
  background-color: transparent;
}

::selection { background: var(--btc-gold); color: var(--btc-ink); }

hr, .wp-block-separator {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--btc-gold-line) 20%,
              var(--btc-gold-line) 80%, transparent);
  margin: 3rem 0;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   Bebas is condensed and all-caps by nature, so it needs generous tracking
   or it turns into a wall. Body copy stays light and roomy for contrast.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.site-title,
.entry-title {
  font-family: var(--btc-display);
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 0.045em;
  line-height: 1.05;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 1.25rem; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.2rem; letter-spacing: 0.08em; }

h5, h6 {
  font-family: var(--btc-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--btc-gold);
}

p { margin-bottom: 1.4em; }

.entry-content > p:first-of-type {
  font-size: 1.12rem;
  color: #F7F5F1;
}


/* Utility: small caps eyebrow above a heading.
   Add class "btc-eyebrow" to a paragraph in the block editor.            */
.btc-eyebrow {
  font-family: var(--btc-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--btc-gold);
  margin-bottom: 0.75rem;
}
.btc-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--btc-gold);
  margin-top: 0.75rem;
}

/* Utility: gold hairline rule with a centre notch. This is the one
   decorative flourish in the whole system — use it between major sections
   and nowhere else.                                                       */
.btc-rule {
  position: relative;
  height: 1px;
  background: var(--btc-gold-line);
  margin: 4rem auto;
  max-width: 240px;
}
.btc-rule::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  background: var(--btc-gold);
  transform: rotate(45deg);
}


/* --------------------------------------------------------------------------
   5. LINKS
   Body links get an underline that grows from the left on hover. Nav and
   buttons are handled separately so they don't inherit this.
   -------------------------------------------------------------------------- */
a { color: var(--btc-gold); text-decoration: none; }
a:hover, a:focus { color: var(--btc-gold-lift); }

.entry-content a:not(.button):not(.wp-block-button__link) {
  background-image: linear-gradient(var(--btc-gold), var(--btc-gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left bottom;
  transition: background-size var(--btc-fast) var(--btc-ease);
  padding-bottom: 2px;
}
.entry-content a:not(.button):not(.wp-block-button__link):hover {
  background-size: 100% 1px;
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   Two styles only. Primary = solid gold, for the one action that matters on
   a page (Add to basket, Checkout). Ghost = gold outline that fills on
   hover, for everything else. Resist adding a third.
   -------------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--btc-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background-color: var(--btc-gold);
  color: var(--btc-ink);
  border: 1px solid var(--btc-gold);
  border-radius: var(--btc-radius, 0px);              /* sharp corners — 1920s, not 2015 */
  padding: 15px 34px;
  line-height: 1;
  transition: background-color var(--btc-fast) var(--btc-ease),
              color var(--btc-fast) var(--btc-ease),
              border-color var(--btc-fast) var(--btc-ease);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--btc-gold-lift);
  border-color: var(--btc-gold-lift);
  color: var(--btc-ink);
}

.button:active, button:active {
  background-color: var(--btc-gold-sink);
  border-color: var(--btc-gold-sink);
}

/* Ghost / secondary — add class "btc-ghost", or use the block editor's
   outline button style.                                                   */
.btc-ghost,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt.btc-ghost {
  background-color: transparent;
  color: var(--btc-gold);
  border: 1px solid var(--btc-gold);
}
.btc-ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--btc-gold);
  color: var(--btc-ink);
}


/* --------------------------------------------------------------------------
   7. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--btc-coal);
  border-bottom: 1px solid var(--btc-line);
}

.site-title a { color: #FFFFFF; letter-spacing: 0.12em; }
.site-description { color: var(--btc-mute); letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; }

.main-navigation {
  background-color: var(--btc-coal);
  border-bottom: 1px solid var(--btc-gold-line);
}

.main-navigation .main-nav ul li a {
  font-family: var(--btc-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btc-bone);
  position: relative;
}

/* Gold underline sliding out from the centre on hover */
.main-navigation .main-nav ul li a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: 14px;
  height: 1px;
  background: var(--btc-gold);
  transition: left var(--btc-fast) var(--btc-ease),
              right var(--btc-fast) var(--btc-ease);
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item > a::after {
  left: 20px; right: 20px;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--btc-gold);
  background-color: transparent;
}

/* Dropdowns */
.main-navigation ul ul {
  background-color: var(--btc-coal);
  border: 1px solid var(--btc-line);
  border-top: 1px solid var(--btc-gold);
}

/* Announcement bar — add a Top Bar widget and give it class "btc-announce" */
.btc-announce,
.top-bar {
  background-color: var(--btc-gold);
  color: var(--btc-ink);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 0;
}
.btc-announce a, .top-bar a { color: var(--btc-ink); text-decoration: underline; }

/* Cart count bubble */
.wc-menu-item .cart-contents-count,
.woocommerce .cart-contents-count {
  background: var(--btc-gold);
  color: var(--btc-ink);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   8. HERO
   Add class "btc-hero" to the hero container block.
   -------------------------------------------------------------------------- */
.btc-hero {
  position: relative;
  background-color: var(--btc-ink);
  padding: clamp(4rem, 12vh, 9rem) 0;
}
.btc-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--btc-gold), transparent);
}
/* Darkening layer so white type stays readable over a photo */
.btc-hero .wp-block-cover__background,
.btc-hero .background-overlay {
  background: linear-gradient(180deg,
              rgba(11,11,11,0.55) 0%,
              rgba(11,11,11,0.85) 100%) !important;
}
.btc-hero h1 { color: #FFFFFF; }
.btc-hero p  { color: var(--btc-bone); font-size: 1.15rem; }


/* --------------------------------------------------------------------------
   9. WOOCOMMERCE — PRODUCT GRID
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
  background-color: var(--btc-coal);
  border: 1px solid var(--btc-line);
  padding: 0 0 22px;
  transition: border-color var(--btc-slow) var(--btc-ease),
              transform var(--btc-slow) var(--btc-ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--btc-gold);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--btc-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  padding: 18px 20px 4px;
}

/* Plain scent name under the brand name — wrap it in <span class="btc-sub"> */
.btc-sub {
  display: block;
  font-family: var(--btc-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btc-mute);
  padding: 0 20px;
}

.woocommerce ul.products li.product .price {
  color: var(--btc-gold);
  font-family: var(--btc-body);
  font-weight: 500;
  font-size: 1.05rem;
  padding: 10px 20px 16px;
  display: block;
}

.woocommerce ul.products li.product .button {
  margin: 0 20px;
  display: block;
  text-align: center;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--btc-gold);
  color: var(--btc-ink);
  border-radius: var(--btc-radius, 0px);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  min-height: auto;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   10. WOOCOMMERCE — SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--btc-gold);
  font-size: 1.6rem;
  font-weight: 400;
}
.woocommerce div.product p.price del { color: var(--btc-faint); }

.woocommerce div.product form.cart div.quantity input.qty {
  background: var(--btc-ink);
  color: var(--btc-bone);
  border: 1px solid var(--btc-line);
  border-radius: var(--btc-radius, 0px);
  height: 47px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  border-bottom: 1px solid var(--btc-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: var(--btc-radius, 0px);
  margin: 0 24px 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btc-mute);
  padding: 14px 0;
  display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--btc-gold);
  box-shadow: inset 0 -2px 0 var(--btc-gold);
}

/* Scent notes list — wrap in <ul class="btc-notes"> */
.btc-notes { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.btc-notes li {
  border-bottom: 1px solid var(--btc-line);
  padding: 12px 0;
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
.btc-notes li strong {
  color: var(--btc-gold);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stock and delivery meta */
.woocommerce div.product .stock { color: var(--btc-gold); font-size: 0.85rem; }
.woocommerce .product_meta { color: var(--btc-faint); font-size: 0.8rem; }


/* --------------------------------------------------------------------------
   11. CART, CHECKOUT & NOTICES
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  border-color: var(--btc-line);
  color: var(--btc-bone);
}
.woocommerce table.shop_table thead th {
  color: var(--btc-gold);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: var(--btc-coal);
  border-top: 2px solid var(--btc-gold);
  color: var(--btc-bone);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--btc-gold); }
.woocommerce-error { border-top-color: #C4523F; }
.woocommerce-error::before { color: #C4523F; }

.woocommerce-checkout #payment { background: var(--btc-coal); border: 1px solid var(--btc-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--btc-smoke); color: var(--btc-mute); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--btc-smoke); }


/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background-color: var(--btc-ink);
  color: var(--btc-bone);
  border: 1px solid var(--btc-line);
  border-radius: var(--btc-radius, 0px);
  padding: 13px 15px;
  font-family: var(--btc-body);
  font-weight: 300;
  transition: border-color var(--btc-fast) var(--btc-ease);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--btc-gold);
  outline: none;
  box-shadow: 0 0 0 1px var(--btc-gold-line);
}

::placeholder { color: var(--btc-faint); opacity: 1; }

label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--btc-mute);
}


/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer,
.footer-widgets,
.site-info {
  background-color: var(--btc-coal);
  color: var(--btc-mute);
}
.footer-widgets { border-top: 1px solid var(--btc-gold-line); }
.site-info {
  border-top: 1px solid var(--btc-line);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.site-footer .widget-title {
  color: var(--btc-gold);
  font-family: var(--btc-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.site-footer a { color: var(--btc-bone); }
.site-footer a:hover { color: var(--btc-gold); }


/* --------------------------------------------------------------------------
   14. BLOG / JOURNAL
   -------------------------------------------------------------------------- */
.entry-meta { color: var(--btc-faint); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; }
.entry-meta a { color: var(--btc-mute); }
.entry-meta a:hover { color: var(--btc-gold); }

blockquote {
  border-left: 2px solid var(--btc-gold);
  background: var(--btc-gold-wash);
  padding: 1.4rem 1.8rem;
  margin: 2.5rem 0;
  font-size: 1.1rem;
  font-style: normal;
  color: #F7F5F1;
}

.paging-navigation .page-numbers {
  border: 1px solid var(--btc-line);
  color: var(--btc-bone);
  padding: 8px 14px;
}
.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
  border-color: var(--btc-gold);
  color: var(--btc-gold);
}


/* --------------------------------------------------------------------------
   15. ACCESSIBILITY & POLISH
   Don't delete this section. Gold on near-black passes contrast for large
   text and UI, but keyboard users need to see where they are.
   -------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--btc-gold);
  outline-offset: 3px;
}

/* Scrollbar (Chrome/Edge/Safari) */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--btc-ink); }
::-webkit-scrollbar-thumb { background: var(--btc-line); }
::-webkit-scrollbar-thumb:hover { background: var(--btc-gold-sink); }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   16. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }

  .main-navigation .main-nav ul li a::after { display: none; }

  .main-navigation .menu-toggle,
  .main-navigation .mobile-bar-items a { color: var(--btc-gold); }

  .main-navigation .main-nav ul li a {
    border-bottom: 1px solid var(--btc-line);
    letter-spacing: 0.12em;
  }

  .button, .wp-block-button__link, .woocommerce a.button {
    width: 100%;
    text-align: center;
    padding: 16px 20px;
  }

  .btc-rule { margin: 2.5rem auto; }
}