/*
 * Draftstack · Copyright (c) 2026 Draftstack (draftstack.in). All rights reserved.
 * UI v10: calmer, more crafted look. Same navy + gold, fewer "template" effects:
 * no dot grid or coloured glow in the hero, no gradient text, no glass blur, no cards jumping on hover,
 * softer shadows, a warm off-white page, and the Figtree typeface instead of the default Inter.
 */
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree.woff") format("woff"); font-weight: 300 900; font-display: swap; }
:root {
  --sans: "Figtree", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --paper: #FBFAF7;
  --sh-2: 0 8px 22px -14px rgba(20,27,45,.22), 0 1px 3px rgba(20,27,45,.05);
  --sh-3: 0 18px 40px -26px rgba(20,27,45,.32);
}
body { background: var(--paper); }

/* Hero: one calm navy, no orbs, no dot grid, no glowing badge, solid gold accent */
.hero8 { background: linear-gradient(180deg, #19213B 0%, #1C2541 100%); }
.hero8::before { display: none; }
.hero8 h1 em { background: none; color: #E2B867; -webkit-text-fill-color: #E2B867; }
.h8-dot { background: #E2B867; box-shadow: none; }
.h8-search { box-shadow: 0 10px 24px -16px rgba(0,0,0,.45); }

/* Header and section tabs: solid, no frosted glass */
.site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.p-tabs { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Hover: a quiet border/colour change instead of cards lifting and arrows sliding */
.card:hover, .cat:hover, .need:hover, .tl-card:hover, .guide-card:hover, .ad-card:hover, .th-cat:hover, .thc:hover, .inside-card:hover, .th-lp:hover, .wa-float:hover { transform: none; }
.cat:hover .cat-icon, .cat:hover .cat-thumb, .hero-art:hover .a1, .hero-art:hover .a2, .hero-art:hover .a3 { transform: none; }
.link-arrow:hover .ic { transform: none; }
.card:hover { box-shadow: var(--sh-2); }

/* Sale banner: one solid colour */
.sale-bar { background: #8E2430; }

/* Free tools: a light placeholder while the live preview loads */
.skel { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: #fff; border-radius: 14px; min-height: 360px; }
.skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF0F4 25%, #F6F7F9 50%, #EEF0F4 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel i:nth-child(1) { width: 45%; height: 22px; } .skel i:nth-child(2) { width: 70%; } .skel i:nth-child(3) { width: 90%; } .skel i:nth-child(4) { width: 80%; } .skel i:nth-child(5) { width: 60%; } .skel i:nth-child(6) { width: 85%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.is-loading { opacity: .65; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }

/* v7.9: product box on library guides, pager gaps */
.g-prod { display:flex; align-items:center; gap:18px; margin:30px 0 8px; padding:16px; border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; color:var(--ink); }
.g-prod img { width:96px; height:96px; border-radius:12px; object-fit:cover; flex:0 0 96px; }
.g-prod-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.g-prod-t small { color:var(--muted); font-weight:600; font-size:13px; }
.g-prod-t b { font-size:17px; line-height:1.3; }
.g-prod-p { font-weight:700; color:var(--navy); font-size:15px; }
.g-prod-p s { color:var(--soft); font-weight:500; }
.g-prod:hover { border-color:var(--navy-2); }
.pg-gap { min-width:24px; text-align:center; color:var(--soft); }
@media (max-width:560px) { .g-prod { flex-wrap:wrap; } .g-prod img { width:72px; height:72px; flex-basis:72px; } .g-prod .btn { width:100%; } }

/* v7.9: product page perks on phones: no half-box shadow, three perks side by side */
.p8-buy .buy-box { box-shadow: none; }
@media (max-width: 560px) {
  /* three perks side by side: icon on top, title and line centred, thin dividers between */
  .p8-buy .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .p8-buy .perks > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 2px 6px; font-size: 11.5px; line-height: 1.35; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
  .p8-buy .perks > div + div { border-left: 1px solid #ECEAE3; }
  .p8-buy .perks > div .ic { width: 36px; height: 36px; margin-bottom: 5px; }
  .p8-buy .perks b { font-size: 13px; line-height: 1.25; color: var(--ink); }
}


/* v7.9: phone menu, design C (search first, slim login strip, rows with chevrons, Free & helpful group) */
.drawer { background: #FBFAF7; }
.dr-head { border-bottom: 0; padding: 14px 14px 6px 20px; }
.dr-head .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: #EFEDE7; }
.dr-body { padding-top: 8px; }
.dr-search { margin: 4px 0 14px; background: #fff; border-color: #E6E4DD; }
.dr-strip { display: flex; align-items: center; gap: 12px; background: #1C2541; color: #fff; border-radius: 14px; padding: 12px 14px; text-decoration: none; border: 0; }
.dr-strip .dr-av { width: 34px; height: 34px; flex: 0 0 34px; background: rgba(255,255,255,.1); color: #E2B867; }
.dr-strip .dr-st { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: #D5D9E5; display: flex; flex-direction: column; }
.dr-strip .dr-st b { color: #fff; font-size: 14.5px; }
.dr-strip .dr-st small { color: #B9BECD; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-strip .dr-in { color: #E2B867; font-size: 14.5px; white-space: nowrap; }
.dr-strip > .ic:last-child { color: #E2B867; }
.dr-label { margin: 24px 4px 4px; }
.dr-links a { border-radius: 0; padding: 14px 4px; gap: 14px; border-bottom: 1px solid #EEF0F5; }
.dr-links a:last-child { border-bottom: 0; }
.dr-links a .dr-t { flex: 1; min-width: 0; }
.dr-links a .dr-count { margin-left: 0; }
.dr-links a .dr-chev { color: #B0B4C3; display: flex; }
.dr-links a .dr-chev .ic { color: #B0B4C3; }
.dr-links a.on { background: transparent; font-weight: 700; }
.dr-links a.on .dr-t { color: #1C2541; }
.dr-links a:active { background: #F2F0EA; }
.dr-chips { margin-top: 6px; }
.dr-chips a { background: #fff; }
/* design C exact: header line, plain user icon in the strip, ink icons, tighter labels */
.dr-head { border-bottom: 1px solid #E8E9EF; padding-bottom: 14px; }
.dr-head .icon-btn { background: #EEF0F5; }
.dr-body { padding-top: 14px; }
.dr-search { border-radius: 14px; margin: 0 0 14px; }
.dr-strip .dr-av { background: transparent; width: 26px; flex-basis: 26px; }
.dr-links a .ic { color: var(--ink); }
.dr-links a { padding: 13px 4px; }
.dr-label { margin: 18px 0 2px; }
.dr-free a .dr-new { margin-left: auto; margin-right: 6px; }
/* v7.9: same three-column perks on desktop: icon on top, centred text, thin dividers */
@media (min-width: 561px) {
  .p8-buy .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .p8-buy .perks > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 2px 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); min-width: 0; }
  .p8-buy .perks > div + div { border-left: 1px solid #ECEAE3; }
  .p8-buy .perks > div .ic { width: 36px; height: 36px; margin-bottom: 6px; }
  .p8-buy .perks b { font-size: 13.5px; line-height: 1.3; color: var(--ink); }
}

/* v7.9: "Offers for you" on product pages: one slim line per coupon, Apply / Remove */
.ofr { margin: 14px 0 2px; border: 1px solid #EADBB8; background: #FCF7EC; border-radius: 14px; overflow: hidden; }
.ofr-h { display: flex; align-items: center; gap: 7px; padding: 9px 12px 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A6A25; }
.ofr-r { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-top: 1px dashed #E3CF9F; margin: 0; }
.ofr-c { font: 700 12.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: #1C2541; background: #fff; border: 1px dashed #C9A458; border-radius: 6px; padding: 5px 7px; flex: 0 0 auto; }
.ofr-t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; color: #1C2541; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofr-t small { color: #7A7F90; font-size: 12.5px; }
.ofr-t .ic { color: #1A7F3C; vertical-align: -2px; margin-right: 4px; }
.ofr-b { flex: 0 0 auto; border: 0; border-radius: 999px; background: #1C2541; color: #fff; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; padding: 8px 14px; cursor: pointer; }
.ofr-b:hover { background: #2B355A; }
.ofr-r.off { opacity: .55; } .ofr-r.off .ofr-b { background: #E3E4EA; color: #8A8FA0; cursor: default; }
.ofr-r.on { background: #EAF6EE; } .ofr-r.on .ofr-c { border-color: #7DBE90; }
.ofr-r.on .ofr-b { background: transparent; color: #1A7F3C; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ofr-x > summary { list-style: none; } .ofr-x > summary::-webkit-details-marker { display: none; }
.ofr-more { display: block; text-align: center; border-top: 1px dashed #E3CF9F; font-size: 13px; font-weight: 600; color: #1C2541; padding: 8px; cursor: pointer; }
.ofr-x[open] > summary { display: none; }
/* short offer line on phones (full text stays on desktop) */
.announce .ann-s { display: none; }
@media (max-width: 640px) {
  .announce.has-short .ann-f { display: none; }
  .announce.has-short .ann-s { display: inline; }
  .announce.has-short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}