/* Late-cascade fixes.
 *
 * Loaded last on purpose. Two things need to beat everything before them:
 * the logged-in admin bar, because core prints its stylesheet after ours, and
 * markup injected after page load, because WooCommerce fragments and blocks can
 * arrive with their own styles. The reduced-motion rules in deshaj.css already
 * end the cascade with !important, so nothing here may use !important against a
 * motion rule or it would win. */

/* ---------- Admin bar ---------- */

body.admin-bar .header{top:32px}
body.admin-bar .drawer,
body.admin-bar .qv,
body.admin-bar .search{padding-top:32px}
@media (max-width:782px){
  body.admin-bar .header{top:46px}
  body.admin-bar #wpadminbar{z-index:120}
}
#wpadminbar{font-family:var(--f-body)}

/* ---------- Cart drawer ---------- */

/* The closed drawer sits just past the right edge, and its -30px shadow reaches
 * back into the viewport as a grey band down every page. The shadow only exists
 * while the drawer is open, and fades on the drawer's own slide timing. */
.drawer{box-shadow:none; transition:transform .55s var(--ease), box-shadow .55s var(--ease)}
.drawer.open{box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}

/* ---------- Core content wrappers on inner templates ---------- */

/* .sr hides content by clipping. The skip link uses the same rule and has to
 * become visible on keyboard focus, which the verbatim stylesheet does not do. */
.sr:focus{
  position:fixed; top:12px; left:12px; z-index:200;
  width:auto; height:auto; clip:auto; overflow:visible; white-space:normal;
  padding:10px 18px; border-radius:999px; text-decoration:none;
  background:var(--gold); color:var(--night); font-weight:600;
}

/* The theme's .wrap owns the measure. Core and Woo both print their own
 * containers, so they are neutralised rather than fought. */
.site-main,
.woocommerce,
.woocommerce-page{position:relative}
.entry-content{max-width:760px}
.entry-content > *:first-child{margin-top:0}
.entry-content p{margin:0 0 18px; line-height:1.75}
.entry-content h2{font-size:clamp(26px,3vw,34px); margin:38px 0 14px}
.entry-content h3{font-size:clamp(21px,2.4vw,26px); margin:30px 0 12px}
.entry-content h4{font-size:19px; margin:26px 0 10px}
.entry-content ul,
.entry-content ol{margin:0 0 20px; padding-left:24px; line-height:1.75}
.entry-content li{margin-bottom:8px}
.entry-content a{color:var(--gold-text); text-decoration:underline; text-underline-offset:3px}
.entry-content a:hover{color:var(--earth)}
.entry-content blockquote{
  margin:26px 0; padding:6px 0 6px 22px;
  border-left:3px solid var(--gold); color:var(--muted);
  font-family:var(--f-display); font-size:19px; line-height:1.6;
}
.entry-content img{max-width:100%; height:auto; border-radius:var(--r-lg)}
.entry-content table{width:100%; border-collapse:collapse; margin:0 0 22px}
.entry-content th,
.entry-content td{border-bottom:1px solid var(--sand); padding:10px 12px; text-align:left}
.entry-content th{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.entry-content code{
  background:var(--paper); border:1px solid var(--sand); border-radius:6px;
  padding:2px 6px; font-size:.9em;
}
.entry-content hr{border:0; border-top:1px solid var(--sand); margin:34px 0}

/* wpautop wraps shortcode output in paragraphs. A <p> around a table or a form
 * is invalid and adds Woo's spacing where the theme already set it. */
p.woocommerce-info,
p.woocommerce-error,
p.woocommerce-message{display:block}
.entry-content .woocommerce:not(:first-child){margin-top:6px}

/* ---------- Injected after load ---------- */

/* The route to the full product page. The static design had no single product
 * view, so this sits under the two action buttons rather than beside them. */
.qv-more{
  display:block; align-self:center; margin-top:2px;
  color:var(--gold-text); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-decoration:none;
  border-bottom:1px solid var(--sand); padding-bottom:2px;
}
.qv-more:hover{color:var(--earth); border-bottom-color:var(--earth)}
.qv-more[hidden]{display:none}

/* A gallery slot that has a photograph keeps its caption, but the verbatim
 * stylesheet only positions a caption over the dashed placeholder. */
.ph.has-photo{border-style:solid; border-color:var(--sand)}
.ph.has-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; text-align:left;
  padding:30px 16px 13px; color:var(--cream); font-size:14.5px;
  background:linear-gradient(180deg, rgba(34,20,12,0) 0%, rgba(34,20,12,.8) 62%);
}
.ph.has-photo svg{display:none}

/* Fragments replace the contents of #lines, #badge and #total. Anything Woo or
 * a payment gateway appends inside the drawer must not inherit the card styles. */
.drawer .woocommerce-message,
.drawer .woocommerce-info{margin:0 0 12px; font-size:15px}
.qv-card .woocommerce-message,
.qv-card .woocommerce-info{display:none}
.woocommerce-checkout #payment img,
.woocommerce-checkout #payment svg{height:auto; max-width:44px}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad{color:var(--kumkum)}
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong{color:var(--wa)}

/* Gateway iframes and wrappers (Razorpay, Stripe, PayPal) arrive with fixed
 * widths from their own CSS. */
.wc_payment_method .payment_box iframe,
.wc_payment_method .payment_box object{max-width:100%}
.woocommerce-checkout .woocommerce-notices-wrapper{margin-bottom:14px}

/* ---------- Product photographs in the card slots ---------- */

/* The vector packs are sized by viewBox alone, so an image needs the same box or
 * the drawer row and the card grid jump when a product has a photo. */
.prod-art img.prod-photo{width:100%; height:auto; display:block}
.cat-art img.cat-photo{position:relative; width:100%; max-width:170px; height:auto; display:block; transition:transform .7s var(--ease)}
.cat:hover .cat-art img.cat-photo{transform:translateY(-8px) rotate(-3deg) scale(1.04)}
.line-art img{width:100%; height:auto; display:block; border-radius:8px}
.qv-art img{position:relative; width:100%; max-width:250px; height:auto; filter:drop-shadow(0 24px 24px rgba(58,36,23,.25))}
.sitem img{width:46px; height:58px; flex:none; border-radius:6px; object-fit:cover}

/* ---------- Filtering the server-rendered grid ---------- */

/* The static page rebuilt #products on every filter change. Here every card ships
 * in the HTML so the section is readable and indexable without JavaScript, and the
 * script only marks the ones it is not showing. display:none rather than opacity or
 * visibility, because a hidden card must also leave the grid and the tab order. */
.products .prod[aria-hidden="true"]{display:none}

/* ---------- Inner pages ---------- */

/* The blog, page, search and 404 templates have no markup in the source design,
 * so these are the smallest set of rules that lets real content sit inside the
 * bands without fighting them. Everything here borrows the homepage's own tokens:
 * the same display face, the same measure, the same card lift. */

/* The night bands all want the lighter gold in their Hindi eyebrow. The film band
 * already said this for itself; this says it once for every dark band. */
.band--night .eyebrow{color:var(--gold)}
.section-head h1{font-size:clamp(32px,3.6vw,48px); line-height:1.12}
.page-head{padding-block:92px 78px}
.page-lede{max-width:640px; margin:6px auto 0; color:var(--cream-dim); font-size:18px}

/* Real content is set narrower than the 1240px grid, because a paragraph across
 * that measure is unreadable at any font size. */
.measure{max-width:760px; margin-inline:auto}
.prose{color:var(--earth); font-size:17px; line-height:1.75}
.prose > * + *{margin-top:20px}
.prose h2,.prose h3,.prose h4{color:var(--earth); letter-spacing:.02em}
.prose h2{font-size:clamp(24px,2.6vw,32px); margin-top:44px}
.prose h3{font-size:clamp(20px,2.2vw,25px); margin-top:34px}
.prose h4{font-size:19px; margin-top:28px}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); transition:color .3s var(--ease), text-decoration-color .3s var(--ease)}
.prose a:hover{color:var(--gold-text); text-decoration-color:var(--gold)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-top:8px}
.prose blockquote{padding:4px 0 4px 24px; border-left:2px solid var(--gold); font-family:var(--f-display); font-size:20px; line-height:1.5; color:var(--gold-text)}
.prose img{max-width:100%; height:auto; border-radius:16px}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0}
.prose table{width:100%; border-collapse:collapse}
.prose th,.prose td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}

.postgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
/* Same fold points as .grid4, so the blog grid breaks where the shop grid does. */
@media (max-width:1040px){ .postgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .postgrid{grid-template-columns:minmax(0,1fr)} }
.postcard{display:flex; flex-direction:column; gap:12px; background:var(--ivory); border-radius:var(--r-lg); padding:16px 16px 22px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); animation:rise .7s var(--ease) backwards; animation-delay:calc(var(--i,0) * 70ms)}
.postcard:hover{transform:translateY(-6px); box-shadow:0 28px 46px -30px rgba(58,36,23,.5)}
.postcard a{text-decoration:none}
.postcard img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:16px}
.postcard h2,.postcard h3{font-size:21px; line-height:1.25}
.postcard h2 a:hover,.postcard h3 a:hover{color:var(--gold-text)}
.post-meta{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
/* The category list is printed inside .prose on a single post, so without this it
 * would take the body-copy link treatment. */
.post-meta a{color:inherit; text-decoration:none}
.post-meta a:hover{color:var(--gold-text); text-decoration:underline}
.post-ex{color:var(--muted)}
.empty-note{margin:0 auto; max-width:640px; text-align:center; color:var(--muted); font-size:18px; padding-block:48px}

/* previous_posts_link() and next_posts_link() print bare anchors with a rel
 * attribute and no class, so the button look has to be written here rather than
 * by adding .btn in the template. */
.pager{display:flex; align-items:center; justify-content:center; gap:14px}
.pager a{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border:1px solid var(--earth); border-radius:999px; color:var(--earth); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-decoration:none; transition:background-color .3s var(--ease), color .3s var(--ease)}
.pager a:hover{background:var(--earth); color:var(--ivory)}

/* The field itself comes from .field so it keeps the shared input look; only the
 * column becomes a row. */
.searchform{flex-direction:row; align-items:stretch; gap:12px; max-width:520px}
.searchform .btn{flex:none; padding:0 20px}

/* ---------- Small screens ---------- */

@media (max-width:600px){
  .woocommerce table.shop_table{font-size:15px}
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{padding:11px 12px}
  .woocommerce table.shop_table img{width:48px}
  .woocommerce .cart-collaterals .cross-sells{display:none}
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #place_order{min-height:50px; padding:0 22px; letter-spacing:.1em}
  body.admin-bar .header{top:0}
}

/* ---------- Print ---------- */

@media print{
  .intro, .strip, .header, .drawer, .qv, .search, .totop, .wa-float, .toast,
  .film, .marquee, .fieldband, .footer .giant, #wpadminbar{display:none !important}
  body{background:#fff; color:#000; font-size:12pt}
  .wrap{max-width:none; padding:0}
  a{text-decoration:none; color:#000}
}