/* ============================================================
   SITE TYPOGRAPHY, BUTTONS AND CORNERS
   ------------------------------------------------------------
   The pattern-page standard, applied to every page and popup.

     display -> Newsreader      headings
     body    -> Cabin           prose, labels, buttons, forms
     data    -> IBM Plex Mono   measurements, size codes, pattern
                                numbers and technical labels

     corners -> 6px small things, 12px buttons and fields and
                cards, 18px modals, drawers and big panels
                (the pattern page's own --pp-r-s / -m / -l)

     buttons -> primary: near-black, clay on hover
                secondary: outline, black on hover
                one shape, one weight, no glow, no gradient

   Loaded LAST in <head> on every page but the shop and the pattern
   pages (which already are the reference), so it wins ties against
   the older stylesheets and against each page's own <style> block.
   What it cannot win by order - an inline style="" written into
   the HTML or built by a script - it overrides by attribute
   selector with !important, which is the only thing that beats an
   inline style.
   ============================================================ */

:root{
  --font-heading: 'Newsreader', Georgia, serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Cabin', -apple-system, 'Segoe UI', sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, monospace;

  /* the corner scale, under the old names too, so every rule in the
     older stylesheets that reads var(--border-radius-*) follows */
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:18px;
  --border-radius-sm:6px;
  --border-radius-md:12px;
  --border-radius-lg:18px;

  --ui-black:#1A1714;
  --ui-ink:#211D1A;
  --ui-clay:#B5563A;
  --ui-line-strong:#C9BCA9;
}

/* ============================================================
   FONTS
   ============================================================ */

/* the declarations that name a font directly, so the variables
   above never reach them */
.mobile-more-menu-header h3,
.menu-link,
.blog-share-title{font-family:var(--font-heading) !important;}
.share-btn{font-family:var(--font-body) !important;}
.category-mini-section h2 .accent-cursive{font-family:var(--font-heading) !important;}

/* style.min.css sets font-family on p, li and td among others. A rule
   aimed straight at an element always beats one inherited from body,
   so the body face has to be re-stated on them or prose keeps the old
   font while everything around it changes. */
body,
p, li, dt, dd, td, th, span, label, input, textarea, select, small, strong, em, a{
  font-family:var(--font-body);
}
h1, h2, h3, h4, h5, h6{font-family:var(--font-heading);}

/* the wordmark is display type wherever it appears */
.logo, a.logo, .footer-logo{font-family:var(--font-heading);}

/* the dress mark sits before the wordmark everywhere the logo appears.
   Sized for both a flex nav (.logo already uses display:flex) and an
   inline footer mark (.footer-logo has no flex), so both alignments
   are covered by one rule. */
.logo-ic{
  width:20px;
  height:auto;
  flex:none;
  display:inline-block;
  vertical-align:middle;
  margin-right:6px;
}
/* .logo already declares its own gap in style.min.css; do not redeclare it
   here. Some pages (e.g. 404.html) split the wordmark into more than one
   inline child ("Indie" + "-Patterns"), and a gap on the flex container
   would land between those too, not just after the icon. margin-right
   above is scoped to the icon alone, so it can't do that. */

/* labels, legends and field captions are interface text, not headings
   - the old stylesheet gave them the heading face, which is now a serif */
label, legend, .form-group label, .form-label, .field-label{
  font-family:var(--font-body);
  font-weight:600;
}

/* badges, tags and pills are interface labels, not headings - the old
   stylesheet gave some of them the heading face */
[class*="badge"]:not([class*="pp-"]):not([class*="shop-"]),
.hero-tag, .sample-tag, .about-hero-badge, .category-badge, .read-time{
  font-family:var(--font-body);
}

/* measurements and codes keep the mono face wherever they appear */
.pattern-specs-table td,
.size-chart-modal table td,
.size-chart-container th,
.size-chart-container td,
.product-meta-badge,
.shop-card-badge{font-family:var(--font-data);}

/* an inline style that names an old family (the blog posts and a few
   scripts still do): headings and the wordmark go to the display face,
   everything else to the body face */
[style*="'Outfit'"], [style*="'Inter'"], [style*="'Playfair Display'"], [style*="'Plus Jakarta Sans'"]{
  font-family:var(--font-body) !important;
}
h1[style*="'Outfit'"], h2[style*="'Outfit'"], h3[style*="'Outfit'"], h4[style*="'Outfit'"],
h1[style*="'Playfair Display'"], h2[style*="'Playfair Display'"], h3[style*="'Playfair Display'"],
.logo[style*="'Outfit'"], a.logo[style*="'Outfit'"]{
  font-family:var(--font-heading) !important;
}

/* ============================================================
   BUTTONS
   ------------------------------------------------------------
   The pattern page's button anatomy on every button of the site:
   12px corners, weight 700, no shadow, no gradient. Primary is
   near-black and turns clay; secondary is an outline that fills
   black. The class lists are the site's own button names - the
   old accent orange, the mint and the gradient all collapse into
   the one primary.
   ============================================================ */
.btn, .btn-block,
.cta-btn-primary, .cta-btn-secondary, .cta-btn-dark, .btn-dark, .btn-accent, .btn-outline,
.btn-home, .btn-shop, .mg-btn,
.download-lock-btn, .download-lock-secondary-btn, .download-btn,
.samples-cta-btn, .blog-promo-btn, .btn-load-more, .btn-size-chart-trigger, .blog-search-btn,
.mobile-sticky-btn, .tab-btn, .auth-tab-btn{
  font-family:var(--font-body) !important;
  font-weight:700 !important;
  border-radius:12px !important;
  text-transform:none;
  box-shadow:none !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn{padding:14px 26px;}

/* primary */
.btn-primary, .btn-primary:link, .btn-primary:visited,
.btn-dark, .btn-accent,
.cta-btn-primary, .cta-btn-dark,
.btn-home, .mg-btn, .mg-btn:link, .mg-btn:visited,
.download-lock-btn, .blog-promo-btn, .btn-load-more,
.mobile-sticky-btn.primary{
  background:var(--ui-black) !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:1.5px solid var(--ui-black) !important;
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-dark:hover, .btn-accent:hover,
.cta-btn-primary:hover, .cta-btn-dark:hover,
.btn-home:hover, .mg-btn:hover,
.download-lock-btn:hover, .blog-promo-btn:hover, .btn-load-more:hover,
.mobile-sticky-btn.primary:hover{
  background:var(--ui-clay) !important;
  border-color:var(--ui-clay) !important;
  color:#FFFFFF !important;
}

/* secondary */
.btn-secondary, .btn-secondary:link, .btn-secondary:visited,
.btn-outline, .btn-shop, .cta-btn-secondary,
.download-lock-secondary-btn, .download-btn, .btn-size-chart-trigger,
.mobile-sticky-btn.secondary{
  background:transparent !important;
  background-image:none !important;
  color:var(--ui-ink) !important;
  border:1.5px solid var(--ui-line-strong) !important;
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.btn-outline:hover, .btn-shop:hover, .cta-btn-secondary:hover,
.download-lock-secondary-btn:hover, .download-btn:hover, .btn-size-chart-trigger:hover,
.mobile-sticky-btn.secondary:hover{
  background:var(--ui-black) !important;
  border-color:var(--ui-black) !important;
  color:#FFFFFF !important;
}

/* segmented tabs and filter tabs: the same shape, the selected one
   filled like a primary button */
.tab-btn, .auth-tab-btn{
  background:transparent;
  color:var(--ui-ink);
  border:1.5px solid var(--ui-line-strong);
  font-weight:600 !important;
}
.tab-btn:hover, .auth-tab-btn:hover{border-color:var(--ui-black);}
.tab-btn.active, .auth-tab-btn.active{
  background:var(--ui-black) !important;
  border-color:var(--ui-black) !important;
  color:#FFFFFF !important;
}
.auth-tabs{border-radius:12px !important; padding:4px;}
.auth-tabs .auth-tab-btn{border-radius:6px !important; border-color:transparent;}
.auth-tabs .auth-tab-btn.active{box-shadow:none !important;}

/* a row of filter tabs sits side by side; the older stylesheet made every
   .tab-btn a full-width menu row (it was written for a dropdown) */
.category-tabs .tab-btn{width:auto; text-align:center;}

/* the cm / inches switch in the size chart (built by script): a two-part tab */
.unit-switch-btn{border-radius:6px !important; font-family:var(--font-body) !important;}
.unit-switch-btn.active{background:var(--ui-black) !important; color:#FFFFFF !important;}

/* fields: the same corner as the buttons beside them. Every text field of the
   site, whatever its class or id - the pattern-page (pp-) and shop fields carry
   their own and are left out */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([class*="shop-"]):not([class*="pp-"]),
select:not([class*="shop-"]):not([class*="pp-"]),
textarea:not([class*="shop-"]):not([class*="pp-"]),
.form-control{
  border-radius:12px !important;
  font-family:var(--font-body) !important;
}
.form-control{font-size:1rem;}
.form-control:focus{
  border-color:var(--ui-black) !important;
  box-shadow:0 0 0 3px #F6E7E0 !important;
  outline:none;
}

/* every <button> without an explicit family fell back to the
   browser default - Arial - because the rule above listed input,
   textarea and select but not button */
button, .btn, [role="button"]{font-family:var(--font-body);}

@media (prefers-reduced-motion: reduce){
  .btn, .tab-btn, .auth-tab-btn{transition:none;}
}

/* ============================================================
   INLINE STYLES
   ------------------------------------------------------------
   Roughly a hundred style="border-radius:..." live in the HTML
   and in the scripts that build the cart drawer, the popups and
   the order pages. Nothing but !important beats an inline style,
   so their corners are put on the scale here by attribute:
     buttons and fields with a 50px pill -> 12px
     14 / 16 / 10px boxes                -> 12px
     20 / 24px panels                    -> 18px
   Small pills on labels and badges (spans, divs) are left alone:
   the pattern page's own tags are pills too.
   ============================================================ */
a[style*="border-radius: 50px"], a[style*="border-radius:50px"],
button[style*="border-radius: 50px"], button[style*="border-radius:50px"],
input[style*="border-radius: 50px"], input[style*="border-radius:50px"],
select[style*="border-radius: 50px"], select[style*="border-radius:50px"],
textarea[style*="border-radius: 50px"]{
  border-radius:12px !important;
}
[style*="border-radius: 14px"], [style*="border-radius:14px"],
[style*="border-radius: 16px"], [style*="border-radius:16px"],
[style*="border-radius: 10px"], [style*="border-radius:10px"]{
  border-radius:12px !important;
}
[style*="border-radius: 20px"], [style*="border-radius:20px"],
[style*="border-radius: 24px"], [style*="border-radius:24px"]{
  border-radius:18px !important;
}

/* the same, for the colour and glow a script writes into a button */
a.btn[style*="gradient"], button.btn[style*="gradient"],
a.btn[style*="box-shadow"], button.btn[style*="box-shadow"]{
  box-shadow:none !important;
}
a.btn-primary[style], button.btn-primary[style]{
  background:var(--ui-black) !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border:1.5px solid var(--ui-black) !important;
}
a.btn-primary[style]:hover, button.btn-primary[style]:hover{
  background:var(--ui-clay) !important;
  border-color:var(--ui-clay) !important;
}

/* ============================================================
   POPUPS AND DRAWERS
   ------------------------------------------------------------
   The quick view, the cart drawer and the popups are built in
   JavaScript with inline styles. Their SHAPE and TYPE follow the
   rules above; their panels take the 18px corner.
   ============================================================ */
/* Labelled buttons inside a popup take the shared shape. Left out: the pattern page's
   own components (pp-*) and the shop's (shop-*), which carry their own corners, and the
   round icon controls (close crosses, arrows, hearts, remove marks) that stay circles. */
.modal-overlay button:not(:is([class*="pp-"], [class*="shop-"], .modal-close, .gallery-nav-btn, .favorite-heart-btn, .size-chart-close, .cart-remove-btn, [class*="close-trigger"])),
.modal-card button:not(:is([class*="pp-"], [class*="shop-"], .modal-close, .gallery-nav-btn, .favorite-heart-btn, .size-chart-close, .cart-remove-btn, [class*="close-trigger"])),
.quickview-modal button:not(:is([class*="pp-"], [class*="shop-"], .modal-close, .gallery-nav-btn, .favorite-heart-btn, .size-chart-close, .cart-remove-btn, [class*="close-trigger"])),
.size-chart-modal button:not(:is(.modal-close, .size-chart-close, .unit-switch-btn)),
.pdf-modal-container button:not(:is([class*="pp-"], .modal-close, .size-chart-close)),
#cart-drawer-panel button:not(:is(.modal-close, .cart-remove-btn, [class*="close-trigger"])),
#favorites-drawer-panel button:not(:is(.modal-close, [class*="close-trigger"])),
.indie-cookie-banner button,
.free-patterns-popup button,
#free-patterns-modal button:not(#free-patterns-modal-close){
  border-radius:12px !important;
  font-family:var(--font-body) !important;
  font-weight:700;
}

/* round controls stay round: arrows, close crosses and heart
   toggles are icons, not labelled buttons */
.modal-overlay .gallery-nav-btn,
.modal-overlay .modal-close,
.modal-overlay .favorite-heart-btn,
.quickview-modal .gallery-nav-btn,
.pdf-modal-container .modal-close,
.size-chart-modal .modal-close,
.size-chart-close,
#cart-drawer-panel .cart-drawer-close-trigger,
#favorites-drawer-panel .fav-drawer-close-trigger,
.cart-remove-btn,
#free-patterns-modal-close{
  border-radius:50% !important;
}

/* panels */
.modal-card, .modal-content, .pdf-modal-dialog, .size-chart-container,
.free-patterns-modal-card, .indie-cookie-banner, .mobile-more-menu-content,
.login-card, .legal-card{
  border-radius:18px;
}
.indie-cookie-banner button,
.indie-cookie-banner .btn{
  font-family:var(--font-body) !important;
}

/* ============================================================
   OVERLAYS
   ------------------------------------------------------------
   .modal-overlay was only defined by the shop and the pattern pages.
   On the other fourteen pages that load sewingFeatures.js, the
   favourites drawer and the free-patterns popup carry that class
   and had no rule behind it, so they were laid out in the normal
   flow - at the very bottom of the page, out of sight. The base is
   the one the shop and pattern pages already use.
   ============================================================ */
.modal-overlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(44,26,17,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  z-index:2500;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  padding:20px;
}
.modal-overlay.active{opacity:1; pointer-events:auto;}
.modal-overlay .modal-card{
  background:#FFFFFF;
  max-width:850px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 25px 60px rgba(44,26,17,.3);
  position:relative;
  transform:scale(.95); transition:transform .3s ease;
}
.modal-overlay.active .modal-card{transform:scale(1);}
/* a modal or drawer locks the page scroll on <body>; the floating chat bubble would sit on top of it */
body[style*="overflow: hidden"] #crisp-chatbox{display:none !important;}
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .modal-overlay .modal-card{transition:none;}
}

/* ============================================================
   TOUCH TARGETS AND SMALL SCREENS
   ------------------------------------------------------------
   Anything you press with a thumb is at least 44px, and the
   drawers' close and remove controls were 12-32px.
   ============================================================ */
.cart-drawer-close-trigger,
.fav-drawer-close-trigger{
  width:44px; height:44px; padding:0;
  display:inline-grid !important; place-items:center;
  flex:none;
}
#cart-drawer-panel button[title="Remove Item"],
#favorites-drawer-panel button[title="Remove Favorite"]{
  width:44px !important; height:44px !important; flex:none;
}
.btn-size-chart-trigger{min-height:44px;}
#cart-drawer-panel .btn,
#favorites-drawer-panel .btn{min-height:44px;}

/* size chart popup: its close cross is a thumb target, and the "how to measure" panel
   has only text now (the diagram image was removed) - the phone rule still laid it out as
   130px image column + text, which squeezed the instructions into 130px */
.size-chart-close{
  width:44px; height:44px; top:12px; right:12px;
  display:grid; place-items:center;
}
.size-chart-guide-col{display:flex !important; flex-direction:column; align-items:stretch;}
#cart-drawer-panel a[onclick*="cart.html"]{display:block; padding:12px 0;}
.timer-label{font-size:.72rem;}
@media (max-width:1100px){
  .nav-icon-link, .my-account-link{min-width:44px; min-height:44px;}
}