/*
Theme Name: CORDEL
Theme URI: https://cordel.com
Author: CORDEL
Description: A bespoke WooCommerce theme for CORDEL — leather goods for watches. Classic PHP theme, no page builders, no third-party plugin dependencies. Native custom fields via the WordPress core meta API.
Version: 1.19.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cordel
WC requires at least: 8.0
WC tested up to: 8.8
*/

:root{
  /* CORDEL palette — warm paper + tobacco ink. Each accent has ONE job:
     oxblood = action/brand, brass = fine detail & rules on dark, tan = quiet meta.
     Never alias these to each other; that flattens the whole system. */
  --ink:#171310;--ink-soft:#241D18;
  --bone:#E8E2D6;--bone-2:#DCD5C6;
  --oxblood:#6E2A22;--oxblood-lt:#8A3A30;--brass:#B08422;--tan:#4E3A22;
  /* brass has two jobs. --brass is for DARK surfaces only (hero, spec strip,
     stickybar, footer). On paper it measured 4.8:1, so light surfaces use
     --brass-ink instead. Never swap one for the other. */
  --brass-ink:#6E4E08;
  /* raised surfaces — warm off-white, NOT #fff. Cards/panels sit on --bone. */
  --paper:#F4F1E9;--paper-90:rgba(244,241,233,.92);
  /* text tones step down: primary -> secondary -> meta. They must differ. */
  --line:#C9C1B0;--line-2:#DAD3C3;--line-dk:#33291F;--txt:#14100D;--txt-2:#24201B;--faint:#3A342C;
  /* form surfaces — an input must read as an input, not as a rule */
  --field:#FCFBF7;--field-line:#BEB5A2;
  /* status — desaturated into the warm family so alerts read as CORDEL,
     not as default Bootstrap. Still clearly distinct from each other. */
  --ok:#4E6247;--warn:#8A6A45;--err:#8C2F26;--err-bg:#EFE4DF;
  --disp:"Bricolage Grotesque",-apple-system,Helvetica,Arial,sans-serif;
  --body:"Hanken Grotesk",-apple-system,Helvetica,Arial,sans-serif;
  --mono:"Poppins",-apple-system,Helvetica,Arial,sans-serif;
  --pad:clamp(20px,4.5vw,72px);--hdr-h:70px;
  --e1:cubic-bezier(.4,0,.1,1);--e2:cubic-bezier(.16,1,.3,1);--e3:cubic-bezier(.77,0,.18,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bone);color:var(--txt);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--oxblood);color:var(--bone)}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
/* dark grounds need a light ring to be visible at all */
.site-footer :focus-visible,.hero :focus-visible,.spec :focus-visible,
.wear :focus-visible,.specstrip :focus-visible,.stickybar :focus-visible{outline-color:var(--bone)}
.edge{padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* HEADER / NAV */
.site-header{position:sticky;top:0;z-index:150;background:rgba(232,226,214,.9);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:background .4s var(--e1),border-color .4s var(--e1),backdrop-filter .4s var(--e1)}

/* ---- transparent over the hero (homepage only) ----
   A sticky header stacks ABOVE the hero, so transparency would just reveal the
   page background. On the homepage the bar is pulled over the hero with a
   negative offset, and the hero pads its content down to compensate. On scroll
   main.js adds .is-solid and it returns to the normal bar. */
.site-header.is-transparent{position:fixed;left:0;right:0;top:0;background:rgba(0,0,0,.16);backdrop-filter:blur(16px) saturate(1.1);border-bottom-color:rgba(255,255,255,.14)}
.site-header.is-transparent .wordmark,
.site-header.is-transparent .nav-links a,
.site-header.is-transparent .nav-ico{color:#fff}
.site-header.is-transparent .nav-ico svg{stroke:#fff}
.site-header.is-transparent .knot{background:#fff}
.site-header.is-transparent .knot::after{border-color:#fff}
.site-header.is-transparent .custom-logo{filter:brightness(0) invert(1)}
.site-header.is-transparent .nav-links a::after{background:#fff}
.site-header.is-transparent .nav-links .current-menu-item>a,
.site-header.is-transparent .nav-links a:hover{color:#fff}
.site-header.is-transparent .nav-toggle span{background:#fff}
/* cart badge stays legible on the glass */
.site-header.is-transparent .cart-count{background:#fff;color:var(--ink)}

/* ---- scrolled: back to the solid bar (stays fixed, only colour changes) ---- */
.site-header.is-transparent.is-solid{background:rgba(232,226,214,.92);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.site-header.is-transparent.is-solid .wordmark,
.site-header.is-transparent.is-solid .nav-links a,
.site-header.is-transparent.is-solid .nav-ico{color:var(--txt)}
.site-header.is-transparent.is-solid .nav-ico svg{stroke:var(--txt)}
.site-header.is-transparent.is-solid .knot{background:var(--oxblood)}
.site-header.is-transparent.is-solid .knot::after{border-color:var(--oxblood)}
.site-header.is-transparent.is-solid .custom-logo{filter:none}
.site-header.is-transparent.is-solid .nav-links a::after{background:var(--oxblood)}
.site-header.is-transparent.is-solid .nav-toggle span{background:var(--txt)}
.site-header.is-transparent.is-solid .cart-count{background:var(--oxblood);color:#fff}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.wordmark{font-family:var(--disp);font-size:23px;font-weight:900;letter-spacing:.16em;display:flex;align-items:center;gap:9px;color:var(--txt)}
.wordmark .knot{width:15px;height:15px;border:2.5px solid var(--oxblood);border-radius:50%;position:relative}
.wordmark .knot::after{content:"";position:absolute;inset:3px;background:var(--oxblood);border-radius:50%}
.wordmark img{max-height:34px;width:auto}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{font-size:16px;font-weight:500;color:var(--txt-2);transition:color .2s;position:relative;text-transform:capitalize;font-family:var(--mono)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--oxblood);transition:width .28s var(--e2)}
.nav-links a:hover{color:var(--txt)}.nav-links a:hover::after{width:100%}
.nav-links li.current-menu-item a,.nav-links li.current_page_item a{color:var(--txt)}
.nav-links li.current-menu-item a::after,.nav-links li.current_page_item a::after{width:100%}
.nav-utils{display:flex;gap:18px;align-items:center}
.nav-utils a{color:var(--txt-2);transition:color .2s;display:inline-flex;position:relative}
.nav-utils a:hover{color:var(--oxblood)}
.nav-utils svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav-utils .cartbadge{position:absolute;top:-6px;right:-8px;background:var(--oxblood);color:var(--bone);font-family:var(--mono);font-size:10px;font-weight:600;min-width:15px;height:15px;border-radius:99px;display:grid;place-items:center;padding:0 3px;line-height:1}
.burger{display:none;width:28px;height:15px;position:relative;background:none;border:0}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);transition:transform .3s var(--e2),opacity .2s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){bottom:0}
.burger.on span:nth-child(1){top:6px;transform:rotate(45deg)}
.burger.on span:nth-child(2){bottom:7px;transform:rotate(-45deg)}
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--bone);z-index:200;transform:translateX(100%);transition:transform .35s var(--e2);border-left:1px solid var(--line);padding:90px var(--pad) 40px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mobile-nav.on{transform:translateX(0)}
.mobile-nav a{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--txt);padding:12px 0;border-bottom:1px solid var(--line);text-transform:capitalize}
.mobile-nav .mn-contact{margin-top:26px;display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:14px;color:var(--txt-2)}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;opacity:0;visibility:hidden;transition:opacity .3s}
.nav-scrim.on{opacity:1;visibility:visible}

/* BUTTONS */
.btn{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;padding:16px 30px;display:inline-block;transition:all .3s var(--e1);border:0;text-align:center}
.btn-solid{background:var(--oxblood);color:var(--bone)}
.btn-solid:hover{background:var(--ink);color:var(--bone)}
.btn-line{border:1px solid var(--txt);color:var(--txt);background:none}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--bone)}

/* FOOTER */
.site-footer{background:#0E0B09;color:#A79E8C;border-top:1px solid var(--oxblood)}
.foot{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding-block:clamp(56px,7vw,84px) 44px}
.foot .fb{grid-column:1/5}
.foot .fb .wm{font-family:var(--disp);font-size:22px;font-weight:900;letter-spacing:.14em;color:var(--bone);display:flex;align-items:center;gap:9px}
.foot .fb .wm .knot{width:14px;height:14px;border:2.5px solid var(--oxblood-lt);border-radius:50%;position:relative}
.foot .fb .wm .knot::after{content:"";position:absolute;inset:3px;background:var(--oxblood-lt);border-radius:50%}
.foot .fb p{font-size:14px;margin-top:18px;max-width:32ch;line-height:1.6}
.foot .fcontact{margin-top:26px;display:flex;flex-direction:column;gap:9px}
.foot .fcontact a,.foot .fcontact span{font-family:var(--mono);font-size:14px;color:#B7AE9B;display:flex;align-items:center;gap:10px;transition:color .2s}
.foot .fcontact a:hover{color:var(--bone)}
.foot .fcontact svg{width:14px;height:14px;stroke:var(--brass);fill:none;stroke-width:1.6;flex-shrink:0}
.fcol{grid-column:span 2}
.fcol:nth-of-type(2){grid-column:7/9}
.fcol h5{font-family:var(--mono);font-size:14px;color:var(--bone);font-weight:600;margin-bottom:18px;letter-spacing:.05em;text-transform:uppercase}
.fcol ul{list-style:none}
.fcol a{display:block;font-size:14.5px;padding:6px 0;transition:color .2s}.fcol a:hover{color:var(--bone)}
.footbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:24px;border-top:1px solid var(--line-dk);font-family:var(--mono);font-size:14px;color:#877E6C}
.footbot .pay{display:flex;gap:10px;align-items:center}
.footbot .pay .card{height:22px;width:34px;border:1px solid var(--line-dk);border-radius:3px;display:grid;place-items:center;background:#000000}
.footbot .pay .card svg{height:12px;width:auto}

/* generic page content (page.php, single.php) */
.page-wrap{padding-block:clamp(48px,7vw,90px);min-height:50vh}
.page-wrap .entry-title{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-size:clamp(30px,4.5vw,60px);line-height:1}
.page-wrap .entry-content{margin-top:24px;max-width:70ch;color:var(--txt-2);line-height:1.75;font-size:16.5px}
/* WooCommerce pages render through page.php, so they land inside
   .entry-content — but they are LAYOUTS, not prose. The 70ch reading measure
   above must not clamp them. */
.woocommerce-cart .page-wrap .entry-content,
.woocommerce-checkout .page-wrap .entry-content,
.woocommerce-account .page-wrap .entry-content,
.woocommerce-order-received .page-wrap .entry-content{max-width:none;color:var(--txt);font-size:16px;line-height:1.5;margin-top:0}
.page-wrap .entry-content h2{font-family:var(--disp);color:var(--txt);font-size:1.6em;margin:1.4em 0 .5em;letter-spacing:-.02em}
.page-wrap .entry-content h3{font-family:var(--disp);color:var(--txt);font-size:1.3em;margin:1.2em 0 .4em}
/* Prose links only. This rule used to match EVERY anchor inside these pages,
   including our components, at specificity (0,2,1) — which beat component
   rules like .acc-help .btn-line (0,2,0). That is why the account help
   button rendered oxblood text on an oxblood slab (invisible), and why
   buttons and product names on cart/checkout came out underlined. Scoping
   it to unclassed anchors kills that whole family of bugs. */
:where(.page-wrap .entry-content) a:not([class]){color:var(--oxblood);text-decoration:underline}
.page-wrap .entry-content img{margin:1.5em 0}

@media(max-width:760px){
  .nav-links{display:none}
  .burger{display:block}
  .foot .fb{grid-column:1/13}
  .fcol{grid-column:span 6}
  .fcol:nth-of-type(2){grid-column:span 6}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.01s!important}}