/* Additions to the store design (styles.css) for the static site and its policy pages. */

/* Placeholders from config.json, until the real details are filled in */
mark.ph { background: #fbe7a8; color: var(--ink); border-radius: 3px; padding: 0 3px; font-style: normal; }
.ft mark.ph { background: rgba(251, 231, 168, .9); }

.wa-btn { justify-self: end; }
.wa-btn svg { fill: var(--forest); stroke: none; }
@media (min-width: 900px) { .wa-btn { grid-column: 3; grid-row: 1; } }

.card-body .nm { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; color: var(--forest); font-weight: 500; }
.card-spec { font-size: var(--small); color: var(--muted); }
a.add-mini { display: inline-flex; align-items: center; text-decoration: none; }
.shelf { padding-block: 8px 40px; }
.shelf + .shelf { border-top: 1px solid var(--line); padding-top: 40px; }

/* Policy and info pages */
.prose { max-width: 760px; padding-bottom: 64px; }
.prose .updated { color: var(--muted); font-size: var(--small); margin-bottom: 24px; }
.prose h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--forest); margin: 32px 0 10px; font-weight: 600; }
.prose h3 { font-family: var(--serif); font-size: 1.25rem; color: var(--forest); margin: 20px 0 6px; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose .lead { font-size: 1.1rem; }
.facts { display: grid; gap: 0; margin: 8px 0 20px; border-bottom: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--forest); font-weight: 500; }
@media (min-width: 700px) { .facts div { grid-template-columns: 220px 1fr; gap: 16px; } }

.table-wrap { overflow-x: auto; margin: 8px 0 24px; }
table.prices { width: 100%; border-collapse: collapse; font-size: var(--small); background: var(--paper); }
table.prices th, table.prices td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.prices th { font-size: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
table.prices .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Images keep their ratio when width/height attributes are set */
img { height: auto; }

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--forest); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 8px; }
main:focus { outline: none; }

/* Cards: the name is a heading link to the product page */
.card-body h3.nm { margin: 0; }
.card-body h3.nm a { text-decoration: none; color: inherit; }
.card-body h3.nm a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.card[hidden], .shelf[hidden] { display: none; }
.section-hd h2 a { color: inherit; text-decoration: none; }
.intro { max-width: 62ch; color: var(--ink); }
.shop-note { padding-block: 24px 48px; font-size: var(--small); max-width: 62ch; }

/* Search */
.toolbar { flex-direction: column; align-items: stretch; }
@media (min-width: 900px) { .toolbar { flex-direction: row-reverse; align-items: center; } }
.search { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); min-width: 0; }
@media (min-width: 900px) { .search { width: 300px; flex: none; } }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 16px; height: 46px; font-size: 1rem; color: var(--ink); border-radius: 999px; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.search button { width: 48px; border: 0; background: none; cursor: pointer; color: var(--forest); display: grid; place-items: center; border-radius: 999px; }
.search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-empty { padding: 8px 0 32px; color: var(--muted); }
.done .search { width: min(360px, 100%); }

/* Product page */
.pdp .gallery .main img { aspect-ratio: 1 / 1; }
.incl { font-size: var(--small); margin-top: -8px; }
.buy .btn svg { width: 20px; height: 20px; fill: currentColor; }
.spec-h { font-family: var(--serif); font-size: 1.4rem; color: var(--forest); font-weight: 600; margin-top: 8px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--muted); font-weight: 400; width: 42%; padding-right: 12px; }
.spec-table td { color: var(--forest); font-weight: 500; }
.tbf { font-size: 1rem; }
details.more { border-top: 1px solid var(--line); padding-block: 4px; }
details.more:last-of-type { border-bottom: 1px solid var(--line); }
details.more summary, .faq summary { cursor: pointer; padding: 12px 28px 12px 0; position: relative; color: var(--forest); font-weight: 500; list-style: none; min-height: 44px; }
details summary::-webkit-details-marker { display: none; }
details.more summary::after, .faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-size: 1.3rem; color: var(--gold); }
details[open] > summary::after { content: "–"; }
details.more p { padding-bottom: 12px; font-size: var(--small); }
.related { border-top: 1px solid var(--line); padding-top: 32px; }

/* Sticky order bar on phones */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255, 252, 247, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(47, 59, 47, .08); transform: translateY(110%); transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.buy-bar.show { transform: none; }
.buy-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.buy-bar-in > div { display: grid; min-width: 0; }
.bb-name { font-size: var(--small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar .price { font-size: 1.3rem; }
.buy-bar .btn { min-height: 46px; padding: 0 20px; flex: none; }
.buy-bar .btn svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 900px) { .buy-bar { display: none; } }
.page-product .ft { padding-bottom: 72px; }
@media (min-width: 900px) { .page-product .ft { padding-bottom: 0; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-list { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.faq details p { padding-bottom: 14px; max-width: 65ch; }
.faq a { color: var(--forest); }

/* Category tiles: price line */
.cat span { font-size: var(--small); }
.shelf[hidden] + .shelf { border-top: 0; padding-top: 8px; }

/* Live catalogue: download and share */
.catalogue-share { display: grid; gap: 14px; padding: 18px; margin-bottom: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.catalogue-share .label { color: var(--sage); }
.catalogue-share p { font-size: var(--small); color: var(--muted); }
.cs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-actions .btn { flex: 1 1 160px; }
.cs-actions .btn svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 900px) { .catalogue-share { grid-template-columns: 1fr auto; align-items: center; } .cs-actions .btn { flex: none; } }

/* Header actions and cart */
.hd-actions { justify-self: end; display: flex; gap: 2px; }
@media (min-width: 900px) { .hd-actions { grid-column: 3; grid-row: 1; } }
.cart-link svg { fill: none; }
.hd-in { grid-template-columns: 92px 1fr 92px; }
@media (min-width: 900px) { .hd-in { grid-template-columns: auto 1fr auto; } }
.buy .btn.ghost { color: var(--forest); }
.page-cart .lines { align-content: start; }
#cart-notes { margin-bottom: 20px; }

/* payments in Razorpay test mode (PAYMENT_TEST_MODE in config.json) */
.test-banner { background: var(--blush); color: var(--forest); font-size: var(--small); text-align: center; }
.test-banner .wrap { padding-block: 8px; }

button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Language menu (i18n.py). On phones the globe sits next to the menu button, so the logo keeps its room;
   from 900px it joins the header icons and shows the language's name. */
.hd-in { position: relative; }
.lang-menu { position: absolute; top: 10px; left: calc(max(16px, env(safe-area-inset-left, 0px)) + 44px); }
.lang-menu summary { list-style: none; width: 44px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: none; }
.lang-now { display: none; }
.lang-list { position: absolute; top: 48px; left: -44px; z-index: 30; margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 240px; }
.lang-list a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--forest); text-decoration: none; font-size: 1rem; }
.lang-list a:hover { background: var(--sage-soft); }
.lang-list a[aria-current="true"] { background: var(--sage-soft); font-weight: 500; }
@media (min-width: 900px) {
  .lang-menu { position: relative; top: auto; left: auto; }
  .lang-menu summary { width: auto; padding: 0 10px; grid-auto-flow: column; gap: 6px; border-radius: 999px; }
  .lang-now { display: inline; font-size: var(--small); }
  .lang-list { left: auto; right: 0; }
}
.ft-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-block: 0 20px; font-size: var(--small); }
.ft-langs a { color: var(--gold-soft); text-decoration: none; }
.ft-langs a[aria-current="true"] { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

/* Indian-language pages: Noto fonts carry the script (set per language in the page head). Script titles drop the
   Latin calligraphy size, labels lose the wide tracking and capitals that break up Indic letters, and lines get
   a little more height for matras. */
.i18n body { line-height: 1.7; }
.i18n :is(.section-hd h2, .shop-hd h1, .page-hd h1, .story h2, .band h2, .panel h2, .done h1, .hero-copy .edition, .script) {
  font-size: 1.9rem; line-height: 1.35; font-weight: 600; }
.i18n :is(.hero-copy h1, .info h1) { line-height: 1.35; }
.i18n :is(.label, .ribbon, .btn, .nav a, .price small, .feat li, .pay-methods span, .ft-base, table.prices th, .card-code, .chip, .add-mini) {
  letter-spacing: 0; text-transform: none; }
.i18n :is(.label, .ribbon, .price small, .feat li, .ft-base) { font-size: .8rem; }
.governing { margin-block: 0 24px; }

/* Chat with Ashanjali (chat.js): a bubble bottom right; full screen on phones, a card on wider screens */
.chat-launch { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--forest); color: var(--paper); font: 500 1rem var(--sans);
  box-shadow: 0 8px 24px rgba(47, 59, 47, .25); cursor: pointer; transition: bottom .25s ease; }
.chat-launch svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.chat-launch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
body:has(.buy-bar.show) .chat-launch { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.chat-open .chat-launch { display: none; }
@media print { .chat-launch, .chat-panel { display: none !important; } }

.chat-panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); }
@media (max-width: 699px) { .chat-open, .chat-open body { overflow: hidden; } }
@media (min-width: 700px) {
  .chat-panel { inset: auto 20px 20px auto; width: 390px; height: min(640px, calc(100vh - 40px)); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 50px rgba(47, 59, 47, .22); overflow: hidden; }
}
.chat-hd { display: flex; align-items: center; gap: 8px; padding: 12px 10px 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px));
  background: var(--forest); color: var(--paper); }
.chat-hd > div { display: grid; flex: 1; min-width: 0; }
.chat-hd strong { font: 600 1.25rem var(--serif); }
.chat-hd span { font-size: .78rem; opacity: .85; }
.chat-hd button { border: 0; background: none; color: inherit; cursor: pointer; border-radius: 8px; min-height: 44px; }
.chat-new { font: .8rem var(--sans); padding: 0 8px; opacity: .9; }
.chat-x { width: 44px; display: grid; place-items: center; }
.chat-x svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.chat-hd button:focus-visible { outline: 2px solid var(--gold-soft); }

.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg p { margin: 0; white-space: pre-line; }
.chat-msg p + p { margin-top: 6px; }
.chat-msg.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--sage-soft); color: var(--forest); border-bottom-right-radius: 4px; }
.chat-msg a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 2px; }
.chat-typing p { color: var(--muted); font-style: italic; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chips button, .chat-chips a { min-height: 40px; padding: 0 14px; border: 1px solid var(--gold); border-radius: 999px; background: var(--paper); color: var(--forest);
  font: .9rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.chat-chips button:hover { background: var(--sage-soft); }

.chat-cards { display: flex; gap: 8px; overflow-x: auto; margin: 10px -6px 2px; padding: 0 6px 4px; scroll-snap-type: x mandatory; }
.chat-card { flex: 0 0 132px; display: grid; gap: 4px; align-content: start; scroll-snap-align: start; padding: 8px; background: var(--cream); border-radius: 10px; }
.chat-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--blush); }
.chat-card-nm { font: 600 1rem/1.15 var(--serif); color: var(--forest) !important; text-decoration: none !important; }
.chat-card-price { font-size: .85rem; color: var(--ink); }
.chat-card-add { min-height: 36px; border: 1px solid var(--forest); border-radius: 999px; background: var(--forest); color: var(--paper); font: .8rem var(--sans); cursor: pointer; }
.chat-card-add:disabled { background: var(--paper); color: var(--forest); }
.chat-card-out { font-size: .8rem; color: var(--tbf); }
.chat-msg .btn { margin-top: 10px; min-height: 42px; padding: 0 16px; font-size: .9rem; text-transform: none; letter-spacing: normal; text-decoration: none; color: var(--paper); }
.chat-msg .btn.ghost { color: var(--forest); border: 1px solid var(--forest); }
.chat-wa { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; padding: 0 16px; border-radius: 999px; background: #1f7a4d; color: #fff !important;
  text-decoration: none !important; font-size: .9rem; }

.chat-order { display: grid; gap: 8px; margin-top: 10px; }
.chat-order label { display: grid; gap: 2px; font-size: .8rem; color: var(--muted); }
.chat-order input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: 1rem var(--sans); color: var(--ink); }
.chat-order .btn { margin-top: 2px; }
.chat-status { font-weight: 500; color: var(--forest); }

.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; background: var(--paper); border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff;
  font: 1rem/1.35 var(--sans); color: var(--ink); }
.chat-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.chat-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--forest); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.chat-send svg { width: 20px; height: 20px; fill: currentColor; }
.chat-send:disabled { opacity: .5; }
.chat-note { margin: 0; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--paper); font-size: .7rem; color: var(--muted); text-align: center; }

/* Checkout: "send me offers" tick box */
.field.check { display: flex; gap: 10px; align-items: flex-start; }
.field.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--forest); }
.field.check label { line-height: 1.4; }

/* Product options (Colour, Pack...) */
.opts { margin: 14px 0 4px; }
.opt-group { margin-bottom: 12px; }
.opt-name { display: block; font-size: .9rem; margin-bottom: 6px; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line, #d9d2c3); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.opt[aria-pressed="true"] { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); font-weight: 600; }
.opt .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.opts select { min-height: 40px; padding: 6px 10px; border-radius: 8px; font: inherit; }
.avail { margin: 6px 0 0; font-size: .9rem; }
.avail[data-state="in_stock"] { color: var(--forest); }
.avail[data-state="sold_out"], .avail[data-state="none"] { color: #a33; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Delivery date box (product page and cart) */
.delivery { display: grid; gap: 6px; margin-block: 14px 4px; }
.delivery label { font-size: var(--small); font-weight: 600; color: var(--forest); }
.dl-row { display: flex; gap: 8px; }
.dl-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font: inherit; }
.dl-row .btn { min-height: 44px; padding: 0 18px; flex: none; }
.dl-out { font-size: var(--small); color: var(--forest); min-height: 1.2em; }
.free-ship { margin: 0; }
.free-ship.ok { color: var(--forest); font-weight: 600; }

/* Track my order */
.track-form { gap: 10px; }
.track-form label { font-size: var(--small); font-weight: 600; }
.track-form input { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; }
.tr-status { font-size: 1.05rem; }
.tr-steps { list-style: none; display: grid; gap: 12px; margin: 4px 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.tr-steps li { position: relative; display: grid; gap: 2px; text-align: left; justify-items: start; color: var(--muted, #777); }
.tr-steps li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.tr-steps li.done { color: var(--forest); }
.tr-steps li.done::before { background: var(--forest); border-color: var(--forest); }
.tr-steps span { font-size: var(--small); font-weight: 400; }

/* Sold-out product: "Email me when it is back" */
.notify { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 252, 247, .6); }
.notify-t { margin: 0 0 10px; font-size: .95rem; }
.notify-row { display: flex; flex-wrap: wrap; gap: 8px; }
.notify-row input { flex: 1 1 14rem; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.notify-msg { margin: 8px 0 0; font-size: .9rem; }

/* Personalisation fields next to Add to cart */
.personalise:empty { display: none; }
.personalise { margin: 14px 0 4px; display: grid; gap: 12px; }
.pfield { display: grid; gap: 4px; }
.pfield label { font-weight: 600; font-size: .95rem; }
.pfield label small, .phelp { font-weight: 400; color: var(--muted, #6b6b5f); }
.pfield input, .pfield select { padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.pnote { margin: 0; color: #a33; font-size: .9rem; }
.cust { color: var(--ink, #2f3b2f); }

/* Gift set contents */
.bundle:empty { display: none; }
.bundle { margin: 14px 0; }
.bundle-h { font-size: 1.05rem; margin: 0 0 6px; }
.bundle-list { margin: 0 0 8px; padding-left: 1.2em; }
.bundle-save { margin: 0; font-size: .95rem; }

/* Shop filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.filters select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font: inherit; color: var(--ink); }
.filters .chk { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; padding: 0 6px; }

/* Guides and blog */
.guide { max-width: 44rem; margin: 0 auto; padding-bottom: 2rem; }
.guide-meta { color: var(--muted, #6b5f55); font-size: .9rem; }
.guide .lede { font-size: 1.15rem; color: var(--muted, #6b5f55); }
.guide-hero { width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.guide-body h2, .guide-body h3 { margin: 1.6em 0 .4em; }
.guide-body img { max-width: 100%; height: auto; border-radius: 10px; }
.guide-body li { margin: .25em 0; }
.guide-cta { margin-top: 2rem; }
.guide-list { list-style: none; padding: 0; display: grid; gap: 1rem; max-width: 44rem; margin: 0 auto 2rem; }
.guide-list a { display: flex; gap: 1rem; align-items: center; padding: .75rem; border: 1px solid var(--line, #e4d9c8); border-radius: 12px; text-decoration: none; color: inherit; }
.guide-list img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }