/* ==========================================================
   RPR ORGANIC CAMPHOR - store styles
   One file. No framework, nothing to download from elsewhere,
   so the pages open fast on a phone on mobile data.
   ========================================================== */

:root{
  --ink:#1a1a1a;
  --ink-soft:#5a5a5a;
  --line:#e3e3e3;
  --bg:#ffffff;
  --bg-soft:#faf9f7;
  --green:#2c6e3f;
  --green-dark:#20522f;
  --red:#d33a2c;
  --gold:#b8860b;
  --radius:6px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.6;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.9rem}
h2{font-size:1.45rem}
h3{font-size:1.15rem}

.muted{color:var(--ink-soft)}
.small{font-size:.875rem}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- header ---------- */
/* THREE BARS STAY PUT, on every screen size: the logo-and-bag bar, the
   menu, and the offer strip. Each sits exactly below the one above it.

   There used to be a fourth - a green announcement strip above them
   all - and the offsets below still allowed for it with a fallback of
   38px long after the strip was deleted, which would have pushed the
   whole header down into empty space. The offsets are MEASURED by the
   script at the foot of header.php and written into --h-head and
   --h-nav; the fallbacks are only for the split second before that
   script runs. */
.site-head{border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:0;z-index:41;
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
.site-nav{position:sticky;top:var(--h-head,72px);z-index:40}
.festbar{position:sticky;
  top:calc(var(--h-head,72px) + var(--h-nav,42px));z-index:39}

.site-head .row{
  display:flex;align-items:center;gap:16px;
  /* padding-block, NOT the "14px 0" shorthand. This element is also
     the .wrap, and the shorthand was quietly wiping the wrap's side
     padding - on a phone that put the Bag link hard against the edge
     of the screen with nothing to tap beside it. */
  padding-block:14px;
}
.brand{display:flex;align-items:center;gap:11px;font-size:1.35rem;
  font-weight:700;color:var(--ink);white-space:nowrap}
.brand-logo{width:54px;height:54px;flex:0 0 54px;object-fit:contain;display:block}
.brand-text{display:block;line-height:1.15}
.brand-text span{display:block;font-size:.7rem;font-weight:400;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase;font-family:system-ui,sans-serif}
.brand:hover{text-decoration:none}
/* On a narrow phone the name takes too much room, so the logo alone
   carries the brand and remains the way home. */
@media (max-width:560px){
  .brand{font-size:1.05rem;gap:8px}
  .brand-logo{width:42px;height:42px;flex:0 0 42px}
  .brand-text{display:none}
}

.head-search{flex:1;min-width:0}
.head-search form{display:flex}
.head-search input{
  flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  font:inherit;font-size:.95rem;
}
.head-search button{
  border:0;background:var(--green);color:#fff;padding:0 16px;
  border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;font:inherit;
}

.head-links{display:flex;align-items:center;gap:18px;font-size:.9rem;
  font-family:system-ui,sans-serif}

/* ---------- the search button ----------
   Only ever shown on a phone, and only when JavaScript is running -
   see the note beside it in inc/header.php. On a computer the search
   box has plenty of room and stays where it is. (.js-only itself is
   declared once, further down with the share buttons.) */
.head-searchbtn{display:none;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--ink);font:inherit;font-family:system-ui,sans-serif;
  font-size:.92rem}
.head-searchbtn svg{width:19px;height:19px;flex:0 0 19px;
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.head-searchbtn:hover{color:var(--green)}
.head-searchbtn:focus-visible{outline:3px solid var(--green);outline-offset:3px;
  border-radius:4px}
.head-links a{color:var(--ink)}
.bag-link{font-weight:600}
.bag-count{
  display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;
  background:var(--red);color:#fff;border-radius:10px;
  font-size:.75rem;text-align:center;line-height:20px;
}

/* ---------- navigation ---------- */
/* ---------- the main menu ----------
   The whole site underlines a link when the mouse is over it. That
   looks wrong on a menu, so the menu switches it off and shows a soft
   green pill instead. The page you are on keeps a solid green line
   under it, so you always know where you are. */
.site-nav{border-bottom:1px solid var(--line);background:#fff}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:4px;justify-content:center;flex-wrap:wrap;
}
.site-nav a{
  display:block;padding:13px 16px 11px;color:var(--ink);
  font-family:system-ui,sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  border-bottom:3px solid transparent;border-radius:4px 4px 0 0;
  transition:background .14s, color .14s;
}
.site-nav a:hover,
.site-nav a:focus-visible{
  text-decoration:none;color:var(--green-dark);background:#f1f7f2;
}
.site-nav a.on{border-bottom-color:var(--green);color:var(--green)}
@media (max-width:760px){
  /* One line that slides sideways, instead of wrapping onto three
     rows and pushing the products off the screen. */
  .site-nav ul{justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:0 6px}
  .site-nav ul::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;padding:12px 12px 10px;font-size:.78rem}
}

/* ---------- hero ---------- */
.hero{padding:46px 0 34px;text-align:center;background:var(--bg-soft);
  border-bottom:1px solid var(--line)}
.hero h1{font-size:2.3rem;margin-bottom:.2em}
.hero p{color:var(--ink-soft);margin:0 0 20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:12px 26px;border:0;border-radius:var(--radius);
  background:var(--green);color:#fff;font:inherit;font-size:1rem;
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--green-dark);text-decoration:none;color:#fff}
.btn[disabled]{background:#bbb;cursor:not-allowed}
.btn-wide{display:block;width:100%}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-soft);color:var(--ink)}
.btn-small{padding:7px 14px;font-size:.88rem}

/* ---------- product grid ---------- */
/* Three across on a computer, not four. Four made the pictures small
   and squeezed the longer product names onto four lines. */
.grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr);
  padding:30px 0;
}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.card:hover{box-shadow:var(--shadow)}
.card-img{aspect-ratio:1/1;overflow:hidden;background:#fff;padding:8px}
/* AND THE SAME BOX ON AN OLDER PHONE.
   aspect-ratio needs Chrome 88 or iPhone 15. Without this block, a
   phone older than that gives the picture box no height at all and the
   tiles come out ragged. @supports itself is ancient, so this is safe
   everywhere: newer phones ignore it, older ones get a fixed height
   that comes to the same thing. */
@supports not (aspect-ratio: 1 / 1){
  .card-img{height:240px}
}
.card-img img{width:100%;height:100%;object-fit:contain}
.card-body{padding:12px 13px 15px;display:flex;flex-direction:column;flex:1}
.card-title{font-size:.93rem;line-height:1.4;margin:0 0 7px;color:var(--ink)}
.card-title a{color:var(--ink)}
.card-price{margin-top:auto}
.price{font-size:1.08rem;font-weight:700}
.price-was{color:var(--ink-soft);text-decoration:line-through;
  font-size:.86rem;margin-right:6px}
.price-save{color:var(--red);font-size:.8rem;font-family:system-ui,sans-serif}

.ribbon{
  position:absolute;top:10px;left:0;z-index:2;
  background:var(--red);color:#fff;
  font-family:system-ui,sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:0 3px 3px 0;
}

/* ---------- stars ---------- */
.stars{color:#f0a500;font-size:.9rem;letter-spacing:1px;
  font-family:system-ui,sans-serif}
.stars .off{color:#d8d8d8}
.rating-line{display:flex;align-items:center;gap:7px;
  font-size:.8rem;color:var(--ink-soft);margin-bottom:6px;
  font-family:system-ui,sans-serif}

/* ---------- product page ---------- */
.product{display:grid;gap:36px;grid-template-columns:1fr 1fr;padding:28px 0}
/* ---------- the photo strip ---------- */
/* The swiping is the browser's own sideways scrolling, snapped to one
   photo at a time. It is done in CSS rather than in script so that a
   finger swipe works before any JavaScript has loaded - which on a
   slow connection is most of the time somebody is first looking. */
.gal{position:relative;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff}
.gal-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gal-strip::-webkit-scrollbar{display:none}
.gal-strip:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:12px;overflow:hidden}
.gal-slide img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .25s ease}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.96);
  border:1px solid var(--line);box-shadow:0 2px 9px rgba(0,0,0,.16);
  cursor:pointer;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;color:var(--ink);padding:0;display:none}
.js-on .gal-many .gal-arrow{display:flex}
.gal-arrow.l{left:10px}
.gal-arrow.r{right:10px}
.gal-arrow:hover{background:#fff;border-color:var(--green);color:var(--green)}
/* A finger has no arrows to press - it swipes. */
@media (hover:none),(pointer:coarse){ .js-on .gal-many .gal-arrow{display:none} }
.gal-count{position:absolute;right:10px;bottom:10px;z-index:3;
  background:rgba(26,26,26,.78);color:#fff;font-family:system-ui,sans-serif;
  font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:20px}
.gal-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 2px}
.gal-dots i{width:8px;height:8px;border-radius:50%;background:#d6d6d0;
  display:block;transition:width .18s,background .18s}
.gal-dots i.on{background:var(--green);width:22px;border-radius:5px}

.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs button{
  width:62px;height:62px;padding:0;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff;cursor:pointer;
}
.thumbs button.on{border-color:var(--green);border-width:2px}
.thumbs img{width:100%;height:100%;object-fit:contain}

.buybox{border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:18px 0;background:var(--bg-soft)}
.qty-row{display:flex;align-items:center;gap:12px;margin:14px 0}
.qty-row input{width:72px;padding:9px;border:1px solid var(--line);
  border-radius:var(--radius);font:inherit;text-align:center}

.attr-table{width:100%;border-collapse:collapse;font-size:.9rem;margin:16px 0}
.attr-table th,.attr-table td{
  text-align:left;padding:7px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.attr-table th{width:40%;font-weight:600;color:var(--ink-soft);
  font-family:system-ui,sans-serif;font-size:.84rem}

/* Centred, not pinned to the left edge of a 1180px page. Kept to a
   comfortable reading width - a line of text running the full width of
   a wide screen is hard to follow back to the start. */
.prose{max-width:860px;margin-left:auto;margin-right:auto}
.prose img{max-width:100%;height:auto}
.prose img{margin:14px 0;border-radius:var(--radius)}
.prose h2,.prose h3{margin-top:1.4em}

/* ---------- cart and checkout ---------- */
.cols{display:grid;gap:34px;grid-template-columns:1.6fr 1fr;padding:26px 0;
  align-items:start}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  background:#fff}
.panel.sticky{position:sticky;top:16px}

.linerow{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.linerow:last-child{border-bottom:0}
.linerow .thumb{width:76px;height:76px;flex:0 0 76px;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff;padding:3px}
.linerow .thumb img{width:100%;height:100%;object-fit:contain}
.linerow .info{flex:1;min-width:0}
.linerow .amt{text-align:right;white-space:nowrap;font-weight:600}

.totals{width:100%;border-collapse:collapse;font-size:.95rem}
.totals td{padding:7px 0}
.totals td:last-child{text-align:right;white-space:nowrap}
.totals tr.grand td{border-top:2px solid var(--ink);padding-top:12px;
  font-size:1.15rem;font-weight:700}
.totals tr.save td{color:var(--red)}

/* ---------- forms ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:.85rem;margin-bottom:5px;
  font-family:system-ui,sans-serif;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:1rem;background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
.field.err input,.field.err select{border-color:var(--red)}
.field .errmsg{color:var(--red);font-size:.82rem;margin-top:4px;
  font-family:system-ui,sans-serif}
.field-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}

.pay-option{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:11px;cursor:pointer;
}
.pay-option.on{border-color:var(--green);background:#f3f8f4}
.pay-option input{margin-top:4px}
.pay-option .t{font-weight:600}
.pay-logos{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.pay-logos span{
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;
  font-size:.7rem;color:var(--ink-soft);font-family:system-ui,sans-serif;
  background:#fff}

/* ---------- notices ---------- */
.note{padding:12px 14px;border-radius:var(--radius);margin:14px 0;
  font-size:.92rem;border:1px solid}
.note-info{background:#eef5fb;border-color:#c8ddf0;color:#1c4f7c}
.note-warn{background:#fdf6e3;border-color:#f0dca8;color:#7a5a00}
.note-err{background:#fdeeec;border-color:#f3c5bf;color:#8e2419}
.note-ok{background:#eef7f0;border-color:#c3e0cc;color:#1d5a30}

/* ---------- steps on checkout ---------- */
.steps{display:flex;gap:8px;list-style:none;margin:0 0 22px;padding:0;
  font-family:system-ui,sans-serif;font-size:.8rem;flex-wrap:wrap}
.steps li{color:var(--ink-soft)}
.steps li::after{content:"›";margin-left:8px;color:var(--line)}
.steps li:last-child::after{content:""}
.steps li.on{color:var(--green);font-weight:600}
.steps li.done{color:var(--ink)}

/* ---------- reviews ---------- */
.review{padding:16px 0;border-bottom:1px solid var(--line)}
.review:last-child{border-bottom:0}
.review-head{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;flex-wrap:wrap}
.review-who{font-size:.86rem;color:var(--ink-soft);
  font-family:system-ui,sans-serif;margin-top:5px}
.verified{color:var(--green);font-size:.76rem}
.review-reply{background:var(--bg-soft);border-left:3px solid var(--green);
  padding:10px 13px;margin-top:10px;font-size:.92rem}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-soft);border-top:1px solid var(--line);
  margin-top:50px;padding:34px 0 26px;font-size:.9rem}
.foot-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot-grid h3{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:system-ui,sans-serif;color:var(--ink-soft)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:7px}
.foot-grid a{color:var(--ink)}
.foot-base{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;
  text-align:center;color:var(--ink-soft);font-size:.82rem}

/* ---------- whatsapp button ---------- */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:50;
  width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.wa:hover{text-decoration:none}
.wa svg{width:30px;height:30px;fill:#fff}

/* ---------- "added to your bag" ----------
   Shown on whatever page the customer lands on after adding. It has to
   be impossible to miss: an older customer who cannot tell whether a
   button worked will press it again, and end up with two. */
.shopflash{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 0;padding:13px 16px;border-radius:var(--radius);
  background:#eef7f0;border:1px solid #bcdcc7;color:#1d5a30;
  font-size:1rem;font-family:system-ui,sans-serif}
.shopflash.bad{background:#fdeeec;border-color:#f3c5bf;color:#8e2419}
.sf-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:#1d5a30;color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;font-weight:700}
.shopflash.bad .sf-tick{background:#8e2419}
.sf-msg{flex:1 1 auto;min-width:0;font-weight:600}
.sf-go{flex:0 0 auto;font-weight:700;text-decoration:underline;
  color:#1d5a30;white-space:nowrap}
.sf-go:hover{color:var(--green-dark)}
@media (max-width:480px){
  .shopflash{font-size:.95rem;padding:11px 13px;gap:9px}
  .sf-go{flex:1 1 100%}
}

/* ==========================================================
   THE BUY BAR AT THE FOOT OF THE PRODUCT PAGE
   ==========================================================
   On a long product page the Add to Bag and Buy Now buttons scroll off
   the top while the customer is still reading, and then there is no way
   to buy without scrolling back up - which an older customer should not
   have to work out. This brings the same two buttons back along the
   bottom as soon as the real ones leave the screen.

   It is drawn on top of the page, so it is given a white background, a
   line and a shadow: a bar that floats over text without separating
   itself from it is unreadable.                                      */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:48;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -3px 14px rgba(0,0,0,.13);
  transform:translateY(100%);transition:transform .18s ease-out;
  padding:10px 0;
}
/* Never shown at all without JavaScript - see the note in product.php. */
.js-on .buybar.on{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .buybar{transition:none}
}
.buybar .bb-in{display:flex;align-items:center;gap:18px}
.bb-what{flex:1 1 auto;min-width:0}
.bb-name{display:block;font-size:.88rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-money{display:flex;align-items:baseline;gap:9px}
.bb-sum{font-size:1.3rem;font-weight:700}
.bb-each{font-size:.82rem;color:var(--ink-soft);font-family:system-ui,sans-serif}
.bb-do{flex:0 0 auto;display:flex;gap:10px}
.bb-do .btn{padding:12px 26px;font-size:1rem;white-space:nowrap}

/* Room at the foot of the page while the bar is up, so the bar is
   never sitting on top of the last thing written there. */
.has-buybar{padding-bottom:84px}

/* The two round buttons move up out of the bar's way. Without this the
   WhatsApp button sits half under it and is tapped by accident. */
.has-buybar .wa{bottom:98px}
.has-buybar .totop{bottom:98px}
.has-buybar .totop.has-wa{bottom:162px}

@media (max-width:640px){
  .buybar{padding:8px 0}
  .buybar .bb-in{gap:11px}
  .bb-name{display:none}          /* they are looking at the product */
  .bb-sum{font-size:1.15rem}
  /* Two full-size buttons, side by side, each one an easy thumb
     target. They keep more than half the bar between them because
     pressing one of these is the whole point of the bar. */
  .bb-do{flex:1 1 auto;gap:8px}
  .bb-do .btn{flex:1 1 0;padding:13px 8px;font-size:.95rem}
  .has-buybar{padding-bottom:78px}
  .has-buybar .wa{bottom:90px}
  .has-buybar .totop{bottom:90px}
  .has-buybar .totop.has-wa{bottom:148px}
}
@media (max-width:380px){
  /* On the narrowest phones the price would squeeze the buttons, so it
     goes and the buttons get the whole bar. */
  .bb-what{display:none}
}
@media print{ .buybar{display:none !important} }


/* ---------- back to the top ----------
   It carries the word "Top" as well as the arrow. An arrow on its own
   is a guess for anyone who has not met the convention, and a good
   number of our customers have not. */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:49;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;width:54px;height:54px;padding:0;
  border:1px solid #d7cfae;border-radius:50%;
  background:#fffdf5;color:var(--green-dark);cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  font-family:system-ui,sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;line-height:1;
}
.totop.has-wa{bottom:82px}          /* clear of the WhatsApp button */
.totop svg{width:21px;height:21px;fill:currentColor;display:block}
.js-on .totop.on{display:flex}
.totop:hover{background:var(--green);color:#fff;border-color:var(--green)}
.totop:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media (max-width:560px){
  .totop{right:13px;bottom:13px;width:48px;height:48px}
  .totop.has-wa{bottom:74px}
  .totop svg{width:19px;height:19px}
}

/* ---------- tables in admin and invoice ---------- */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:9px 10px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.table th{background:var(--bg-soft);font-family:system-ui,sans-serif;
  font-size:.82rem;letter-spacing:.03em}
.table td.num,.table th.num{text-align:right;white-space:nowrap}

/* ---------- phone ---------- */
@media (max-width:860px){
  .product{grid-template-columns:1fr;gap:22px}
  .cols{grid-template-columns:1fr;gap:22px}
  .panel.sticky{position:static}
}
@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:1.5rem}
  .hero{padding:30px 0 24px}
  .hero h1{font-size:1.7rem}
  /* The phone header layout is NOT here. It is in one place only, in
     the PHONE block at the foot of this file. There used to be a copy
     of it here as well, and the two did not agree about where the
     search box went. */
  .site-nav ul{gap:16px;justify-content:flex-start;overflow-x:auto;
    flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .site-nav a{white-space:nowrap}
  .field-row{grid-template-columns:1fr}
  .wrap{padding:0 13px}
}

/* ---------- the range name above a product title ----------
   Tells someone scanning a list which family a product belongs to,
   before they read a long name like "RPR Organic Bhimseni Camphor
   Flakes, 500g X 1 Jar". */
.card-eyebrow{display:block;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:#c2691a;
  font-family:system-ui,sans-serif;margin:0 0 5px}
.prod-eyebrow{display:block;font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:#c2691a;
  font-family:system-ui,sans-serif;margin:0 0 4px}

/* The two or three lines on a tile that answer "why this one?" */
.card-desc{margin:0 0 9px;font-size:.84rem;line-height:1.55;
  color:var(--ink-soft);font-family:system-ui,sans-serif;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}

/* ---------- About this item ---------- */
.keypoints{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 26px}
.keypoints h2{margin:0 0 14px;font-size:1.2rem}
.keypoints ul{list-style:none;margin:0;padding:0}
.keypoints li{display:flex;gap:12px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid #ededea}
.keypoints li:last-child{border-bottom:0;padding-bottom:0}
.keypoints li:first-child{padding-top:0}
.kp-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-size:1.05rem}
.kp-t{font-family:system-ui,sans-serif;font-size:.9rem;line-height:1.6}
.kp-t b{display:block;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-dark);margin-bottom:3px}
@media (max-width:760px){
  .keypoints{padding:16px 15px}
  .kp-ic{flex:0 0 28px;width:28px;height:28px;font-size:.95rem}
  .kp-t{font-size:.95rem}
}

/* ==========================================================
   ON A PHONE: ONE PRODUCT AT A TIME, IN BIGGER TYPE

   Many of the people buying this camphor are over sixty. Two
   products squeezed side by side on a phone makes every word small
   enough to be a struggle.

   One card per row, full width. The picture is capped in height so
   a customer is not made to scroll a whole screen to reach the
   price - the photo stays large and clear, and the name, the
   labels and the price all sit under it without scrolling again.
   ========================================================== */
@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:16px;padding:18px 0}

  .card-img{aspect-ratio:auto;height:230px;padding:10px}
  .card-body{padding:15px 16px 17px}

  .card-eyebrow{font-size:.76rem}
  .card-title{font-size:1.12rem;line-height:1.4}
  .card-desc{font-size:1rem;line-height:1.6;-webkit-line-clamp:3}
  .ftags-sm li{font-size:.84rem;padding:5px 11px}
  .rating-line{font-size:.94rem}
  .price{font-size:1.35rem}
  .price-was{font-size:1rem}
  .price-save{font-size:.94rem}
  .card-add button{padding:14px 10px;font-size:1.05rem}
  .ribbon{font-size:.72rem;padding:5px 11px}

  /* Two labels on a tile here, so they stay on one line. The product
     page still shows all four. */
  .ftags-sm li:nth-child(n+3){display:none}
}

/* ---------- printing (the invoice) ---------- */
@media print{
  .site-head,.site-nav,.site-foot,.wa,.totop,.festbar,
  .noprint{display:none !important}
  body{font-size:12px;color:#000}
  .wrap{max-width:none;padding:0}
  .panel{border:0;padding:0}
}


/* ==========================================================
   HOME PAGE SECTIONS
   ========================================================== */

/* Hero - cream from the logo, drawn by the browser rather than
   downloaded, so it appears instantly on mobile data. */
.hero{background:linear-gradient(180deg,#fdf8e6 0%,#f7efc9 100%);
  border-bottom:1px solid #eadfb0;padding:46px 0 42px;text-align:center;
  position:relative;overflow:hidden}

/* The photo goes UNDER the cream, not over it. At this strength it
   reads as texture rather than a picture, so every word on top keeps
   its full contrast. */
.hero.has-photo::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background-image:var(--hero-photo);
  background-size:cover;background-position:center;
  opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse at center,
      rgba(0,0,0,.25) 0%, rgba(0,0,0,.85) 55%, #000 100%);
  mask-image:radial-gradient(ellipse at center,
      rgba(0,0,0,.25) 0%, rgba(0,0,0,.85) 55%, #000 100%);
}
/* Faintest in the middle, where the headline sits. */
.hero > .wrap{position:relative;z-index:1}

/* ---------- a proper banner photo ----------
   Shown at full strength, because it was chosen for this. The words
   then sit on a soft panel of their own, so the contrast behind them
   is a known white rather than whatever the photo happens to be at
   that point. A headline straight onto a photo is readable in the
   studio and unreadable on a phone in sunlight. */
.hero.photo-strong{padding:62px 0 58px}
.hero.photo-strong::before{opacity:1;-webkit-mask-image:none;mask-image:none}
.hero.photo-strong::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(255,252,240,.45),rgba(255,250,230,.72))}
.hero.photo-strong > .wrap{z-index:2}
.hero.photo-strong .hero-panel{
  display:inline-block;max-width:760px;padding:30px 38px 34px;
  background:rgba(255,253,246,.9);
  border:1px solid rgba(190,170,110,.4);
  border-radius:14px;
  box-shadow:0 6px 30px rgba(90,70,20,.13);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
@media (max-width:640px){
  .hero.photo-strong{padding:40px 0 38px}
  .hero.photo-strong .hero-panel{padding:22px 18px 26px;max-width:none;display:block}
}
.hero h1{margin:0 0 10px;font-size:2.3rem;letter-spacing:.01em}
.hero p{margin:0 auto 22px;max-width:580px;color:#4a4a3f;font-size:1.05rem}
.hero .btn{padding:13px 34px;font-size:1rem}
.hero-note{margin-top:14px;font-size:.84rem;color:#6b6655;
  font-family:system-ui,sans-serif}

/* The four questions every buyer asks before ordering. */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-bottom:1px solid var(--line)}
.trust div{background:#fff;padding:16px 10px;text-align:center}
.trust strong{display:block;font-size:.92rem}
.trust span{font-size:.78rem;color:var(--ink-soft);
  font-family:system-ui,sans-serif}
@media (max-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}

.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:0 0 4px}
.sec-head h2{margin:0;font-size:1.5rem}
.sec-sub{margin:0 0 16px;color:var(--ink-soft);font-size:.92rem;
  font-family:system-ui,sans-serif}

.bestsellers{background:var(--bg-soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:30px 0 34px}
.rank{position:absolute;top:10px;left:10px;z-index:2;width:26px;height:26px;
  border-radius:50%;background:var(--green-dark);color:#fff;font-size:.8rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  font-family:system-ui,sans-serif}

/* Category cards - where each category's description lives. */
.cat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:18px 0 6px}
.cat-card{border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;background:#fff;display:block;color:var(--ink)}
.cat-card:hover{box-shadow:var(--shadow);text-decoration:none;
  border-color:#c9ddcd}
.cat-card h3{margin:0 0 6px;font-size:1.12rem}
.cat-card p{margin:0 0 10px;font-size:.88rem;color:var(--ink-soft);
  font-family:system-ui,sans-serif;line-height:1.55}
.cat-card .go{font-size:.85rem;color:var(--green);font-weight:600;
  font-family:system-ui,sans-serif}
@media (max-width:760px){.cat-cards{grid-template-columns:1fr}}

/* Reviews - 146 real ones is the strongest thing the shop has. */
.revstrip{background:var(--green-dark);color:#fff;padding:30px 0 34px;
  margin-top:34px}
.revstrip .sec-head h2{color:#fff}
/* The rating line is allowed to wrap. Told never to wrap, it pushed the
   whole page wider than a 360px phone - which is the white strip that
   appears when you drag the page sideways. */
.revstrip .sec-head span{white-space:normal}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.revcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:16px}
.revcard .st{color:#ffc43d;font-size:.9rem;letter-spacing:2px}
.revcard p{margin:8px 0 10px;font-size:.92rem;line-height:1.6}
.revcard .who{font-size:.8rem;opacity:.75;font-family:system-ui,sans-serif}
@media (max-width:760px){.revgrid{grid-template-columns:1fr}}

/* ---------- Add to Bag, straight from a tile ---------- */
.card-add{margin-top:10px}
/* ADD TO BAG IS THE THING THE WHOLE TILE EXISTS FOR, so it is filled
   in, not outlined.
   It used to be white with a green edge. On a shelf of pale tiles that
   is almost invisible, and worse, an outlined button is what most
   websites use for the SECOND choice - the one you are not meant to
   press. A customer of seventy reads "not for me" and hunts for the
   real button. White on this green is 6.2 to 1, well past the 4.5
   needed, so it stays easy to read as well as easy to find. */
.card-add button{
  width:100%;padding:12px 10px;border:1px solid var(--green);
  background:var(--green);color:#fff;border-radius:var(--radius);
  font:inherit;font-family:system-ui,sans-serif;font-size:.95rem;
  font-weight:700;letter-spacing:.01em;cursor:pointer;
  transition:background .14s,border-color .14s;
}
.card-add button:hover,
.card-add button:focus-visible{background:var(--green-dark);
  border-color:var(--green-dark)}
.card-add button:active{background:var(--green-dark)}
/* ALREADY IN THE BAG.
   A different colour, a tick, and the number - because a tile that
   looks identical before and after the press leaves the customer
   guessing, and a customer who guesses presses again. Pale green with
   a dark green tick reads as "done" rather than "do this", which is
   exactly the difference being drawn. 8.6 to 1 on the text. */
.card-add.got button{
  background:#e4f3e8;border-color:var(--green);color:#164d27;
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;padding:10px;line-height:1.25}
.card-add.got button:hover,
.card-add.got button:focus-visible{background:#d4ebdb;
  border-color:var(--green-dark)}
.card-add.got .ab-tick{width:19px;height:19px;flex:0 0 auto;fill:none;
  stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.card-add.got button small{display:block;width:100%;font-size:.78rem;
  font-weight:600;color:var(--green);text-decoration:underline;
  margin-top:1px}
.card-add .soldout{width:100%;padding:9px 10px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-soft);font-size:.85rem;font-family:system-ui,sans-serif}


/* ---------- Why Choose Us ---------- */
.whyus{padding:34px 0 10px}
.award{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,#fdf8e6,#f7efc9);
  border:1px solid #e6d79c;border-radius:var(--radius);
  padding:16px 20px;margin-bottom:16px}
.award .medal{font-size:1.8rem;line-height:1}
.award strong{display:block;font-size:1.05rem}
.award span{font-size:.86rem;color:#6b6655;font-family:system-ui,sans-serif}

.certs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.certs li{list-style:none;border:1px solid var(--line);border-radius:30px;
  padding:7px 15px;font-size:.8rem;font-family:system-ui,sans-serif;
  color:var(--ink-soft);background:#fff}
.certs li strong{color:var(--green-dark);font-weight:600}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 22px;
  list-style:none;margin:0;padding:0}
.why-grid li{display:flex;gap:9px;align-items:flex-start;
  font-size:.9rem;font-family:system-ui,sans-serif;line-height:1.5;
  padding:7px 0}
.why-grid .tick{flex:0 0 18px;width:18px;height:18px;margin-top:1px;
  border-radius:50%;background:var(--green);color:#fff;font-size:.68rem;
  display:flex;align-items:center;justify-content:center}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}


/* ---------- the back bar on inner pages ---------- */
.backbar{border-bottom:1px solid var(--line);background:var(--bg-soft)}
.backbar .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 0;font-size:.84rem;font-family:system-ui,sans-serif}
.back-btn{display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border:1px solid var(--line);border-radius:30px;
  background:#fff;color:var(--green-dark);font-weight:600}
.back-btn:hover{text-decoration:none;background:var(--green);color:#fff;
  border-color:var(--green)}
.backbar-sep{color:var(--line)}
.crumbs{color:var(--ink-soft);min-width:0}
.crumbs .sep{margin:0 5px;color:#bbb}
.crumbs .here{color:var(--ink)}
@media (max-width:560px){
  /* On a phone the product name can be very long, so the trail is cut
     to one line rather than wrapping over three. */
  .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
}

/* ---------- product page: the big picture magnifies ---------- */
/* (the photo strip's own rules are higher up the file) */
/* Only where there is a real mouse. A finger has no hover, so phones
   and tablets are left completely alone by this rule. */
@media (hover:hover) and (pointer:fine){
  .gal-slide{cursor:zoom-in}
  .gal-slide:hover img{transform:scale(1.9)}
  /* LEFT, not right. The photo counter now sits in the bottom right
     corner, and the two were printed on top of each other. */
  .zoom-hint{position:absolute;left:10px;bottom:10px;z-index:2;
    background:rgba(0,0,0,.55);color:#fff;border-radius:20px;
    padding:4px 11px;font-size:.74rem;font-family:system-ui,sans-serif;
    pointer-events:none;transition:opacity .2s}
  .gal:hover .zoom-hint{opacity:0}
}
@media (hover:none),(pointer:coarse){
  .zoom-hint{display:none}
}

/* ---------- Buy Now beside Add to Bag ---------- */
.buy-row{display:flex;gap:10px;margin-top:4px}
.buy-row .btn{flex:1;text-align:center}
.btn-outline{background:#fff;color:var(--green);border:1px solid var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
@media (max-width:420px){.buy-row{flex-direction:column}}

/* ---------- long reviews fold away ---------- */
.rev-body{position:relative;line-height:1.65}
/* Four whole lines, so the fold never cuts a line in half. */
.rev-body.clipped{max-height:6.6em;overflow:hidden}
.rev-body.clipped::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1.7em;background:linear-gradient(transparent,#fff)}
.rev-more{margin-top:9px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--green);font:inherit;font-family:system-ui,sans-serif;
  font-size:.84rem;font-weight:600}
.rev-more:hover{text-decoration:underline}

.pay-flag{display:inline-block;margin-left:7px;padding:2px 9px;border-radius:20px;
  background:var(--green);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;
  font-family:system-ui,sans-serif}


/* ---------- quantity stepper ---------- */
.qty-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff}
.qty-stepper button{width:38px;border:0;background:#fafafa;color:var(--ink);
  font-size:1.1rem;line-height:1;cursor:pointer;font-family:system-ui,sans-serif}
.qty-stepper button:hover{background:var(--green);color:#fff}
.qty-stepper input{width:58px;border:0;border-left:1px solid var(--line);
  border-right:1px solid var(--line);text-align:center;padding:9px 4px;
  font:inherit;font-size:1rem;-moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-form.busy{opacity:.55;pointer-events:none;transition:opacity .15s}

/* what the chosen quantity costs, on a product page */
.line-total{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:12px 0 0;padding:10px 13px;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--line)}
.line-total .lt-calc{font-size:.86rem;color:var(--ink-soft);
  font-family:system-ui,sans-serif}
.line-total .lt-sum{font-size:1.2rem;font-weight:700}

/* ---------- Why Choose Us, picture cards ---------- */
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 0}
.why-card{border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;background:#fff}
.why-card .ic{font-size:1.9rem;line-height:1;display:block;margin-bottom:10px}
.why-card h3{margin:0 0 7px;font-size:1.05rem}
.why-card p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-soft);
  font-family:system-ui,sans-serif}
@media (max-width:900px){.why-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-cards{grid-template-columns:1fr}}

/* the numbers that prove the claims */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:20px}
.proof div{background:#fff;padding:18px 10px;text-align:center}
.proof b{display:block;font-size:1.35rem;color:var(--green-dark)}
.proof span{font-size:.78rem;color:var(--ink-soft);font-family:system-ui,sans-serif}
@media (max-width:620px){.proof{grid-template-columns:repeat(2,1fr)}}


/* ---------- only a few reviews at first ----------
   Both rules are behind .js-on. Without JavaScript every review shows
   and the button never appears, which is the honest fallback: better
   to show everything than to hide it behind a button that cannot work. */
.rev-showall{display:none}
.js-on .rev-showall{display:block;text-align:center;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line)}
.js-on .review.rev-hidden{display:none}


/* ---------- coloured feature labels ---------- */
.ftags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.ftags li{font-size:.78rem;font-family:system-ui,sans-serif;font-weight:600;
  padding:5px 11px;border-radius:20px;line-height:1.3}
.ftags .ft1{background:#eaf5ec;color:#1f6b36}
.ftags .ft2{background:#fdeef3;color:#a3326b}
.ftags .ft3{background:#fff5e2;color:#9a6b05}
.ftags .ft4{background:#eaf1fb;color:#2a5590}
.ftags-sm{margin:8px 0 0;gap:4px}
.ftags-sm li{font-size:.7rem;padding:3px 8px}

/* ---------- MRP and the saving ---------- */
.mrp-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mrp-label{font-size:.76rem;letter-spacing:.08em;color:var(--ink-soft);
  font-family:system-ui,sans-serif;text-transform:uppercase}
.price-off{font-size:.82rem;color:var(--green);font-weight:600;
  font-family:system-ui,sans-serif}

/* ---------- the sliding promise strip ---------- */
.promo-marquee{overflow:hidden;background:#efe7fb;border-top:1px solid #ddd0f2;
  border-bottom:1px solid #ddd0f2;margin:4px 0 26px;padding:11px 0}
.pm-track{display:flex;gap:44px;white-space:nowrap;width:max-content;
  animation:pm-slide 32s linear infinite}
.pm-track span{font-family:system-ui,sans-serif;font-size:.86rem;
  font-weight:700;color:#4a2f73;letter-spacing:.02em}
@keyframes pm-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.promo-marquee:hover .pm-track{animation-play-state:paused}
/* Someone who has asked their device to stop moving things gets a
   still strip instead, centred. */
@media (prefers-reduced-motion:reduce){
  .pm-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    gap:12px 26px;white-space:normal}
  .pm-track span:nth-child(n+6){display:none}
}

/* ---------- certifications, on every page ---------- */
.certbar{background:linear-gradient(180deg,#fdf8e6,#f7efc9);
  border-top:1px solid #e6d79c;border-bottom:1px solid #e6d79c;
  padding:22px 0}
.certbar .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  justify-content:center;text-align:center}
.certbar-head{display:flex;align-items:center;gap:11px}
.cb-medal{font-size:1.7rem;line-height:1}
.certbar-head strong{display:block;font-size:.98rem}
.certbar-head span{font-size:.78rem;color:#6b6655;font-family:system-ui,sans-serif}
.certbar-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
  justify-content:center}
.certbar-list li{background:#fff;border:1px solid #e6d79c;border-radius:6px;
  padding:7px 13px;font-family:system-ui,sans-serif;line-height:1.3}
.certbar-list b{display:block;font-size:.8rem;color:var(--green-dark)}
.certbar-list span{font-size:.7rem;color:var(--ink-soft)}
.certbar-link{font-size:.84rem;font-weight:600;font-family:system-ui,sans-serif}

/* ---------- mailing list ---------- */
.subscribe{background:var(--green-dark);color:#fff;padding:26px 0}
.subscribe .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  justify-content:space-between}
.subscribe h3{margin:0 0 4px;font-size:1.15rem}
.subscribe p{margin:0;font-size:.86rem;opacity:.85;max-width:430px;
  font-family:system-ui,sans-serif}
.subscribe form{display:flex;gap:8px;flex-wrap:wrap}
.subscribe input[type=email]{padding:11px 14px;border:0;border-radius:var(--radius);
  font:inherit;font-size:.95rem;min-width:240px}
.subscribe .btn{background:#fff;color:var(--green-dark)}
.subscribe .btn:hover{background:#f1f7f2;color:var(--green-dark)}
.sub-msg{flex:1 0 100%;margin:4px 0 0;font-size:.88rem;
  font-family:system-ui,sans-serif;background:rgba(255,255,255,.12);
  border-radius:var(--radius);padding:9px 13px}
@media (max-width:760px){
  .subscribe .wrap{flex-direction:column;align-items:stretch;text-align:left}
  .subscribe form{flex-direction:column}
  .subscribe input[type=email]{min-width:0}
}


/* ==========================================================
   BEST SELLERS - one clear winner

   Three equally decorated cards still leave the choice to the
   customer, and an undecided customer usually buys nothing. So the
   top seller is framed and named, and the others carry a small
   number. Nothing moves and nothing flashes: a band of light
   sweeping over the words dims them for a moment, which is the last
   thing an older reader needs.
   ========================================================== */
/* In this section the rank IS the message, so the ON SALE / BEST
   SELLER corner flag is hidden here - otherwise it would sit on top of
   the banner and the number, both of which are pinned to the corner. */
.bestsellers .ribbon{display:none}
.bestsellers .card.top{border:2px solid var(--green);
  box-shadow:0 0 0 5px rgba(44,110,63,.09)}
.bestsellers .card.top .card-body{background:#f6fbf7}
.bestsellers .card.top .card-img{margin-top:27px}
.pickline{position:absolute;top:0;left:0;right:0;z-index:3;background:var(--green);
  color:#fff;text-align:center;font-family:system-ui,sans-serif;font-size:.74rem;
  font-weight:700;padding:5px;letter-spacing:.05em}
.rankn{position:absolute;top:10px;left:10px;z-index:3;width:28px;height:28px;
  border-radius:50%;background:#fff;border:2px solid var(--green);color:var(--green);
  font-family:system-ui,sans-serif;font-weight:800;font-size:.82rem;
  display:flex;align-items:center;justify-content:center}
.proofline{display:flex;align-items:center;gap:6px;margin:8px 0 0;
  background:#fff4e5;border:1px solid #f3d7a8;border-radius:5px;padding:6px 9px;
  font-family:system-ui,sans-serif;font-size:.78rem;color:#8a5a06;font-weight:600}

/* Half speed on the home page - a slow drift rather than a scroll. */
.promo-marquee.slow .pm-track{animation-duration:92s}

/* ---------- who built the website ---------- */
/* The footer sits on a LIGHT background, so this uses the normal green
   link colour. Gold was taken from the dark reviews band by mistake and
   was almost invisible here. */
.built-by{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;
  font-size:.82rem;font-family:system-ui,sans-serif;line-height:1.7;
  color:var(--ink-soft)}
.built-by strong{color:var(--ink)}
.built-by a{color:var(--green);font-weight:700;text-decoration:underline}
.built-by a:hover{color:var(--green-dark)}
.built-by .bb-label{display:block;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:3px;color:var(--ink-soft)}


/* ==========================================================
   PAYING ONLINE: THE 5% OFFER
   ==========================================================
   Red background, white text, as asked. The contrast is 5.9:1 on the
   panel and 6.4:1 on the badge, both above the 4.5 needed for normal
   text - which matters here more than anywhere, because this is the
   line that decides how the customer pays.                          */
.payoffer{display:flex;gap:13px;align-items:flex-start;
  background:#b3261e;color:#fff;border-radius:var(--radius);
  padding:14px 16px;margin:0 0 16px}
.payoffer .po-badge{flex:0 0 auto;background:#fff;color:#b3261e;
  border-radius:6px;padding:6px 10px;font-weight:800;font-size:.95rem;
  letter-spacing:.02em;font-family:system-ui,sans-serif;white-space:nowrap}
.payoffer .po-text{font-size:.95rem;line-height:1.55}
.payoffer .po-text strong{display:block;font-size:1.06rem;margin-bottom:2px}

.pay-flag-save{background:#b3261e}

/* "Pay online and save Rs 114" under the total, when it has not been
   taken off yet. */
.totals tr.savenudge td{border-top:1px dashed var(--line);padding-top:10px;
  color:#b3261e;font-weight:700;font-size:.9rem;text-align:left;
  font-family:system-ui,sans-serif;white-space:normal}


/* ==========================================================
   FESTIVAL OFFER
   ==========================================================
   Two pieces, both switched on from Settings and both switching
   themselves off on the end date:
     .festbar   - a slim strip under the menu, on every page
     .festhero  - the big panel, home page only
   No animation on either. A moving banner above a Place Order button
   is the fastest way to lose an older customer's place on the page. */
.festbar{background:linear-gradient(90deg,#7a1b12,#b3261e 45%,#c8601a);
  color:#fff;font-family:system-ui,sans-serif}
.festbar .wrap{display:flex;align-items:center;justify-content:center;
  gap:7px 16px;flex-wrap:wrap;padding:9px 0;text-align:center}
/* The offers sit in the SAME slot and fade between each other, rather
   than one after another down the page - the strip must stay one line
   tall however many offers are running. */
.fb-msg{display:none;align-items:center;justify-content:center;
  gap:7px 14px;flex-wrap:wrap}
.fb-msg.on{display:flex;animation:fbIn .45s ease-out}
@keyframes fbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fb-gift .fb-off{background:#fff;color:#1d5a30}
.festbar b{font-size:.95rem;letter-spacing:.02em}
.festbar .fb-short{display:none}   /* the phone-length title; see the phone block */
.festbar .fb-off{background:#fff;color:#b3261e;border-radius:5px;
  padding:2px 9px;font-weight:800;font-size:.86rem}
.festbar .fb-ends{font-size:.86rem;opacity:.92}
.festbar a{color:#fff;text-decoration:underline;font-size:.88rem;font-weight:600}

.festhero{position:relative;overflow:hidden;border-radius:var(--radius);
  margin:0 0 26px;padding:30px 32px;color:#fff;
  background:radial-gradient(ellipse at 78% 18%,#d8761f 0%,transparent 55%),
             linear-gradient(118deg,#6d1710 0%,#9e2217 52%,#b8431b 100%)}
/* The lamps are drawn, not photographed, so there is no extra picture
   to download and nothing to go blurry on a big screen. */
.festhero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:
    radial-gradient(circle at 12% 84%,rgba(255,214,130,.55) 0 3px,transparent 4px),
    radial-gradient(circle at 26% 92%,rgba(255,214,130,.40) 0 2px,transparent 3px),
    radial-gradient(circle at 64% 88%,rgba(255,214,130,.45) 0 3px,transparent 4px),
    radial-gradient(circle at 88% 78%,rgba(255,214,130,.35) 0 2px,transparent 3px),
    radial-gradient(circle at 46% 12%,rgba(255,214,130,.30) 0 2px,transparent 3px)}
/* A lifestyle photo behind the panel, when one has been uploaded.
   It sits UNDER a dark wash heavy enough that every word on top keeps
   white-on-dark contrast whatever the photo happens to be doing at
   that point. Measured against the supplied picture with the text
   hidden, the WORST point anywhere behind the wording is 5.8:1 -
   above the 4.5 that normal text needs. If the picture is ever swapped
   for a lighter one, measure it again rather than assuming. */
.festhero.has-photo{background-image:var(--fest-photo-sm,var(--fest-photo));
  background-size:cover;background-position:center}
@media (min-width:761px){
  .festhero.has-photo{background-image:var(--fest-photo)}
}
/* The wash goes OVER the photo and UNDER the words. */
.festhero.has-photo::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(100deg,rgba(72,14,9,.94) 0%,
             rgba(116,26,15,.90) 48%,rgba(150,60,20,.78) 100%)}
.festhero.has-photo .fh-in{text-shadow:0 1px 3px rgba(0,0,0,.45)}

.festhero .fh-in{position:relative;z-index:1;max-width:680px}
.festhero .fh-kicker{display:inline-block;background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.38);border-radius:20px;
  padding:4px 13px;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-family:system-ui,sans-serif;margin-bottom:12px}
.festhero h2{margin:0 0 8px;font-size:2.05rem;line-height:1.18;color:#fff}
.festhero p{margin:0 0 18px;font-size:1.04rem;line-height:1.6;
  color:rgba(255,255,255,.93);max-width:540px}
.festhero .fh-deal{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:20px}
.festhero .fh-pct{background:#fff;color:#9e2217;border-radius:10px;
  padding:9px 15px;font-family:system-ui,sans-serif;font-weight:800;
  font-size:1.5rem;line-height:1.05;text-align:center}
.festhero .fh-pct small{display:block;font-size:.66rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;margin-top:2px}
.festhero .fh-when{font-size:.95rem;font-family:system-ui,sans-serif;
  line-height:1.5}
.festhero .fh-when strong{display:block;font-size:1.02rem}
.festhero .btn{background:#fff;color:#9e2217;border-color:#fff;font-weight:800}
.festhero .btn:hover{background:#ffeccd;color:#7a1b12;border-color:#ffeccd}

/* The festive dressing on the most ordered product. A border, a band
   and a corner tag - the photograph itself is never covered, because
   that is what the customer is trying to look at.

   That card already carries a green MOST ORDERED banner across its
   top. Rather than stack a second strip on top of it, the banner
   itself turns festive and a marigold band is drawn under it. */
/* Gold replaces the green frame on this one card while the festival is
   on - the two together read as a mistake rather than a decoration. */
.bestsellers .card.top.festive{border:2px solid #c8901f;
  box-shadow:0 0 0 5px rgba(200,144,31,.15)}
.bestsellers .card.top.festive .card-body{background:#fffaf0}
.card.festive .pickline{background:linear-gradient(90deg,#8d1e14,#b3261e 55%,#c8601a)}
/* The marigold band hangs off the BOTTOM of the banner rather than
   being placed at a fixed number of pixels down the card. The banner's
   height changes with the font size and the wording, and a measurement
   showed it at 29px where a guess had put the band at 27 - overlapping
   it by two pixels. Attached this way it is always exactly underneath. */
.card.festive .pickline::after{content:"";position:absolute;left:0;right:0;
  top:100%;height:5px;
  background:repeating-linear-gradient(90deg,#b3261e 0 11px,#d8a23a 11px 22px)}
/* The picture starts immediately under the marigold band - banner 29px
   plus band 5px, both measured. An earlier 38px left a strip of empty
   white between the band and the photo that read as a mistake rather
   than as spacing. This needs the .bestsellers prefix to outweigh the
   plain .card.top rule higher up the file, which only allows for the
   banner and not the band. */
.bestsellers .card.festive .card-img{margin-top:34px}
/* The offer is stated on a line of its own inside the card, NOT as a
   corner sticker over the photograph. A sticker there covers the one
   thing the customer is trying to look at, and on a phone it lands
   right where a thumb scrolls. */
.festive-tag{display:flex;align-items:center;gap:7px;margin:9px 0 0;
  background:#b3261e;color:#fff;border-radius:5px;padding:7px 10px;
  font-family:system-ui,sans-serif;font-size:.82rem;font-weight:700;
  line-height:1.3}
.festive-tag b{font-size:.95rem;font-weight:800}


/* ==========================================================
   PHONE: THE BARS STAY PUT, AND NOTHING POKES OFF THE SIDE
   ========================================================== */
@media (max-width:640px){
  /* TWO ROWS, not one.
     Row 1: the logo on the left, Sign in and Bag on the right.
     Row 2: the search box across the full width.
     One row was tried first and it was wrong - the search box took all
     the space between the logo and the links and pushed Sign in and
     Bag off the edge of the screen, so a customer on a phone could not
     see their own bag. The bag is the most important link on the whole
     site; it never gets squeezed. */
  .site-head .row{flex-wrap:wrap;gap:7px 10px;padding-block:7px}
  /* flex-basis 0, not auto. With auto the name sets the brand's width
     and a 360px screen could not fit the name and the links on one
     row, so the links dropped to a third row and the header grew to
     130px. With 0 the brand takes whatever is left after the links
     have had theirs, and the name shortens with dots instead. */
  .brand{flex:1 1 0;min-width:0;font-size:1.02rem;gap:8px}
  .brand-logo{width:34px;height:34px;flex:0 0 34px}

  /* THE SHOP NAME COMES BACK ON A PHONE.
     It was hidden because the old one-row header had no space for it.
     Now that the search box has a row of its own there is room, and a
     logo on its own does not tell a first-time visitor whose shop this
     is. The name is allowed to shrink and cut off with dots rather
     than push the Bag link off the screen - the bag always wins. */
  .brand-text{display:block;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;
    letter-spacing:-.01em}
  .brand-text span{display:none}      /* the tagline is one line too many */
  .head-links{order:1;flex:0 0 auto;gap:13px;font-size:.92rem}
  .head-links a{display:inline-block}        /* Sign in comes back */
  .head-search{order:2;flex:0 0 100%;min-width:0}
  .head-search input{font-size:16px;padding:8px 10px}  /* 16px stops iPhone zooming in */
  .head-search button{padding:8px 13px;font-size:.86rem}

  /* THE SEARCH BOX FOLDS AWAY ON A PHONE.
     With four bars staying on screen, a permanent row for the search
     box was costing about 45 pixels of an 844 pixel phone for
     something most customers use once, if at all. It now opens from
     the button beside Sign in.
     Only when JavaScript is running: otherwise the button could not
     open anything, so the box stays visible and search still works. */
  .js-on .head-searchbtn{display:inline-flex}
  .js-on .head-search{display:none}
  .js-on .site-head.search-open .head-search{display:block;
    margin-top:2px;padding-bottom:2px}

  /* The magnifying glass on its own. With the word beside it the shop
     name was cut down to "RPR ORGANI…", and the whole point of this
     change was to free up room. The glass is one of the few pictures
     everyone reads the same way, it sits next to two words that say
     what the row is for, and a screen reader still announces it as
     "Search products" from the hidden label. */
  .head-searchbtn .hs-word{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .head-searchbtn{position:relative;min-width:40px;min-height:40px;
    justify-content:center}
  .head-searchbtn svg{width:23px;height:23px;flex-basis:23px}
  /* THE MENU HAS TO LOOK LIKE A MENU.
     On a phone it was white text-on-white directly under a white
     header, so there was nothing to tell a customer it was the menu at
     all - it read as part of the page. A tinted band with a line above
     and below makes it a bar. Dark green on cream here is 8.1:1, well
     clear of the 4.5 normal text needs, and the chosen item keeps its
     underline as well as its colour so it is not colour alone doing
     the work. */
  .site-nav{background:#f4f1e8;border-top:1px solid #e0dac6;
    border-bottom:2px solid #d8d0b8}
  .site-nav a{padding:11px 13px 9px;color:var(--green-dark);font-weight:600}
  .site-nav a.on{background:#fff;border-bottom-color:var(--green)}

  /* Nothing may be wider than the screen. A single long word, a wide
     table or a pasted picture inside a description used to drag the
     whole page sideways. */
  img, video, table, pre, iframe{max-width:100%}
  .prose table{display:block;overflow-x:auto}
  .sec-head{flex-wrap:wrap}
  .sec-head span{white-space:normal}

  /* The narrow copy of the banner photo, when one exists. */
  .hero.has-photo::before{
    background-image:var(--hero-photo-sm,var(--hero-photo))}

  /* ---- the festival pieces on a small screen ---- */
  .festhero{padding:22px 18px;margin-bottom:20px}
  .festhero h2{font-size:1.5rem}
  .festhero p{font-size:1rem}
  .festhero .fh-deal{gap:11px}
  .festhero .fh-pct{font-size:1.3rem;padding:8px 13px}
  .festhero .btn{display:block;text-align:center}
  /* ONE LINE on a phone, and never more.
     Everything here stays on screen while the customer scrolls, so it
     is paid for in screen space. Measured on a 390px phone, the long
     version ran to three lines and the four bars together took 27% of
     the screen; cut to one line they take about a fifth, which leaves
     four fifths for the shop. The two pieces that matter - how much
     off, and how long left - are the two that stay. */
  .festbar .wrap{padding:6px 12px;gap:0 9px;flex-wrap:nowrap;
    white-space:nowrap;overflow:hidden}
  .festbar .fb-title,
  .festbar .fb-long,
  .festbar .fb-link{display:none}
  .festbar .fb-short{display:inline;font-size:.82rem}
  .festbar .fb-off{font-size:.82rem;padding:2px 8px}
  .festbar .fb-ends{font-size:.78rem}

  /* The red offer panel stacks, so the badge is not squeezed to nothing
     next to a long sentence. */
  .payoffer{flex-direction:column;gap:9px}
  .payoffer .po-text strong{font-size:1.04rem}
}


/* ==========================================================
   THE NARROWEST PHONES - LAST IN THE FILE ON PURPOSE
   ==========================================================
   These take things AWAY that the blocks above switched on. Two rules
   of the same strength fight by position, so anything that overrules
   the general phone layout has to come after it. The first attempt put
   this higher up the file and it did nothing at all: the 640px block
   below it turned the festival title straight back on, and measuring
   showed it still 106 pixels wide on a 320px screen.                 */
@media (max-width:340px){
  /* The offer strip ran past the edge here and "Ends in 24 days" was
     cut in half. The diya and the words "Festive Offer" say the least
     of the three - how much off, and how long left, are what make
     somebody act. Measured: this takes the strip from needing 338px to
     needing 223px on a 320px screen. */
  .festbar .fb-short{display:none}
}

/* ==========================================================
   THE SIZE BADGE
   ==========================================================
   Three Bhimseni products differ only by 250g, 500g and 1kg, and the
   size is buried mid-name. Lifted out, in gold, it is the first thing
   the eye lands on after the title. Gold on cream measures 6.1 against
   the 4.5 normal text needs, and the number is a full 1.12rem - this
   badge exists for people who find small type hard. */
.sizechip{display:inline-flex;align-items:baseline;gap:7px;
  background:#fff3d6;border:1.5px solid #e0b64b;border-radius:7px;
  padding:4px 11px;font-family:system-ui,sans-serif;margin:2px 0 9px}
.sizechip b{font-size:1.12rem;font-weight:800;color:#7a5200;line-height:1.15}
.sizechip span{font-size:.78rem;color:#8a6b22;font-weight:600}
.sizechip.big{padding:7px 15px;margin:6px 0 12px}
.sizechip.big b{font-size:1.4rem}
.sizechip.big span{font-size:.88rem}

/* ==========================================================
   SHARE
   ==========================================================
   Note the class is .shbtn and the WhatsApp one is .sh-wa, NOT .wa -
   .wa is already the big green button fixed to the corner of every
   page, and reusing it sent these little icons to the corner too. */
.sharerow{display:flex;align-items:center;gap:8px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
.sharerow .sh-lab{font-family:system-ui,sans-serif;font-size:.82rem;
  color:var(--ink-soft);font-weight:600;margin-right:3px}
.shbtn{width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--line);
  background:#fff;cursor:pointer;padding:0;flex:0 0 36px}
.shbtn:hover{transform:translateY(-1px)}
.shbtn svg{width:18px;height:18px}
.sh-wa{background:#25d366;border-color:#25d366}
.sh-wa svg{fill:#fff}
.sh-fb{background:#1877f2;border-color:#1877f2}
.sh-fb svg{fill:#fff}
.sh-tw{background:#111;border-color:#111}
.sh-tw svg{fill:#fff}
.sh-more{background:var(--bg-soft)}
.sh-more svg{fill:var(--ink-soft)}
.sh-more.done{background:var(--green);border-color:var(--green)}
.sh-more.done svg{fill:#fff}
.shbtn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
/* Hidden until JavaScript is running. Anything carrying .js-only is
   switched back on BY NAME below, never by one blanket rule: the
   phone's search button also carries .js-only, and a blanket
   ".js-on .js-only{display:flex}" put it on the computer header too,
   where there is a full search box already. */
.js-only{display:none}
.js-on .sh-more{display:flex}
.js-on .gal-count{display:block}
.js-on .gal-dots{display:flex}

/* ==========================================================
   ASK US ON WHATSAPP
   ========================================================== */
.askwa{display:flex;align-items:center;gap:12px;background:#e9f9ee;
  border:1.5px solid #9fdcb4;border-radius:10px;padding:12px 14px;
  margin:16px 0 0;font-family:system-ui,sans-serif;color:#14532d}
.askwa:hover{background:#dff5e7;border-color:#7fcf9c;text-decoration:none}
.askwa .aw-ic{flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center}
.askwa .aw-ic svg{width:22px;height:22px;fill:#fff}
.askwa .aw-t{flex:1 1 auto;min-width:0;font-size:.9rem;line-height:1.4;
  color:#2c5c3d}
.askwa .aw-t b{display:block;font-size:1.02rem;color:#14532d}
.askwa .aw-go{flex:0 0 auto;background:#25d366;color:#fff;border-radius:7px;
  padding:10px 16px;font-weight:700;font-size:.92rem;white-space:nowrap}
@media (max-width:560px){
  .askwa{flex-wrap:wrap;gap:10px}
  .askwa .aw-t{flex:1 1 calc(100% - 52px)}
  .askwa .aw-go{flex:1 1 100%;text-align:center;padding:12px}
}

/* ==========================================================
   THE PRODUCT TILE
   ==========================================================
   THE WHOLE TILE OPENS THE PRODUCT. One real link, stretched over the
   box by this rule - not a click handler on the <article>. A real link
   can be opened in a new tab, read out by a screen reader and followed
   by Google, and it works with no JavaScript at all.
   Everything that has its OWN job - Add to Bag, the share buttons -
   is lifted above it so it keeps that job. */
.card{position:relative}
.card-title a.card-go::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
.card .card-add,
.card .sharerow{position:relative;z-index:2}
.card-img{display:block}

.card{border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(26,26,26,.05);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.card .card-img{background:#fbfaf7;border-bottom:1px solid var(--line);padding:12px}
.card .card-body{padding:14px 15px 15px}
.card .card-price{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.card .card-add button{width:100%}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:0 8px 24px rgba(26,26,26,.13);transform:translateY(-2px);
    border-color:#d8d2c2}
}
@media (prefers-reduced-motion:reduce){
  .card,.shbtn{transition:none}
  .card:hover{transform:none}
}


/* ==========================================================
   THE PHONE NUMBER IN THE HEADER
   ==========================================================
   Up out of the deleted green strip. On a shop whose customers are
   often over seventy, a visible phone number is not decoration - it is
   what gets used when something goes wrong, and seeing it there is
   part of why they trust the page enough to pay on it. */
.head-tel{display:inline-flex;align-items:center;gap:6px;
  color:var(--green-dark);font-weight:700;white-space:nowrap}
.head-tel svg{width:15px;height:15px;flex:0 0 15px;fill:currentColor}
.head-tel:hover{color:var(--green)}
@media (max-width:430px){
  /* THE DIGITS GO, THE HANDSET STAYS.
     Measured on a 320px screen, the number plus Sign in plus Bag came
     to 334px of a 320px row and pushed the Bag link clean off the
     edge. The handset on its own still dials when tapped, which is
     what the number is there for on a phone - nobody reads a number
     off a screen and types it into the same phone. */
  .head-tel span{display:none}
  .head-tel{min-width:38px;min-height:38px;justify-content:center;gap:0}
  .head-tel svg{width:19px;height:19px;flex-basis:19px}
}

/* ==========================================================
   FREE SHIPPING, top right corner of every product
   ==========================================================
   Green on white at 5.9, and the van is read before the words are. */
.fship{position:absolute;top:0;right:0;z-index:4;
  display:flex;align-items:center;gap:6px;
  background:#1d5a30;color:#fff;font-family:system-ui,sans-serif;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;line-height:1.15;
  padding:6px 10px;border-radius:0 10px 0 10px;pointer-events:none}
.fship svg{width:19px;height:19px;flex:0 0 19px;fill:#fff}
.fship i{font-style:normal;display:block}
.fship i small{display:block;font-size:.58rem;font-weight:700;opacity:.92;
  letter-spacing:.02em}
.fship.big{font-size:.8rem;padding:8px 13px;border-radius:0 10px 0 12px}
.fship.big svg{width:23px;height:23px;flex-basis:23px}
.fship.big i small{font-size:.66rem}
@media (max-width:420px){
  .fship{font-size:.62rem;padding:5px 8px;gap:5px}
  .fship svg{width:16px;height:16px;flex-basis:16px}
}

/* ==========================================================
   BEST SELLER TAGS, in place of the old 2, 3, 4
   ========================================================== */
.bstag{position:absolute;top:10px;left:0;z-index:3;
  background:var(--green);color:#fff;font-family:system-ui,sans-serif;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:0 4px 4px 0;
  box-shadow:0 1px 4px rgba(0,0,0,.18)}
.bstag.gold{background:#b8860b}
/* The tag sits where the photo starts, so the photo is nudged down the
   same way the top card's banner nudges it. */
.bestsellers .card .card-img{margin-top:8px}


/* ==========================================================
   THE OFFER STRIP FOLDING AWAY
   ==========================================================
   Folded, it takes no height at all. The tab at the edge is the only
   thing left, and one tap brings the strip back.
   The height is animated rather than switched off outright, so the
   page does not jump under a reading finger. */
.festbar{overflow:hidden;max-height:160px;
  transition:max-height .22s ease,opacity .18s ease}
.festbar.folded{max-height:0;opacity:0;border:0}

.offertab{position:fixed;left:0;top:38%;z-index:38;
  display:none;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#b3261e,#8d1e14);color:#fff;border:0;
  border-radius:0 8px 8px 0;box-shadow:2px 2px 10px rgba(0,0,0,.28);
  padding:11px 6px;cursor:pointer;font-family:system-ui,sans-serif}
.offertab span{writing-mode:vertical-rl;font-size:.72rem;font-weight:800;
  letter-spacing:.1em}
.js-on .offertab.on{display:flex}
.offertab:hover{background:linear-gradient(180deg,#c92c22,#9e2217)}
.offertab:focus-visible{outline:3px solid #fff;outline-offset:-5px}
@media (prefers-reduced-motion:reduce){
  .festbar{transition:none}
  .fb-msg.on{animation:none}
}
@media print{ .offertab{display:none !important} }


/* ==========================================================
   THE FREE GIFT
   ==========================================================
   Said in the bag, at the checkout, on the order and in the email -
   the same promise in every place a customer looks for it. */
.giftnote{display:flex;align-items:flex-start;gap:11px;margin:14px 0 0;
  padding:12px 14px;border-radius:var(--radius);
  background:#fff8e8;border:1.5px solid #e8cf92;color:#6b5112;
  font-family:system-ui,sans-serif;font-size:.92rem;line-height:1.45}
.giftnote.earned{background:#eef7f0;border-color:#bcdcc7;color:#1d5a30}
.giftnote .gn-ic{flex:0 0 auto;font-size:1.3rem;line-height:1.1}
.giftnote b{display:block}

/* On the admin order screen this is the line that decides whether the
   gift actually reaches the customer, so it is impossible to scroll
   past. */
.giftpack{background:#fff4e5;border:2px solid #d98324;border-radius:var(--radius);
  padding:13px 15px;margin:14px 0 0;font-family:system-ui,sans-serif;
  color:#7a4a08;font-size:1.3rem;line-height:1.3}
.giftpack strong{display:block;font-size:1.02rem;letter-spacing:.02em;margin:2px 0}
.giftpack span{display:block;font-size:.86rem;color:#8a6436}


/* ==========================================================
   "EXTRA 5% OFF WHEN YOU PAY ONLINE" - on every product
   ==========================================================
   White on this red measures 5.9 against the 4.5 normal text needs,
   and the percentage is the heaviest thing in the line, because it is
   the one word somebody scanning a shelf of similar jars will read. */
.payline{display:flex;align-items:center;gap:8px;margin:10px 0 0;
  background:#b3261e;color:#fff;border-radius:6px;padding:8px 11px;
  font-family:system-ui,sans-serif;font-size:.84rem;line-height:1.35}
.payline b{font-size:.95rem;font-weight:800}
.payline .pl-ic{flex:0 0 auto;font-size:1rem;line-height:1}
.payline.big{font-size:.95rem;padding:11px 14px;margin:12px 0 0}
.payline.big b{font-size:1.1rem}
/* .payline.bonus is gone: the pay-online line no longer carries the
   festival half at all. That now has its own tag above the price, so
   the line below stays the one plain red bar it always was. */
/* THE DIWALI DEAL TAG, above the price.
   Amazon's festival block sits immediately above the price and RPR's
   customers have seen it all month, so the shape needs no learning.
   The gold edge is what stops it blurring into the ordinary red
   pay-online line further down: two offers, two different objects. */
.ldtag{display:flex;align-items:center;gap:10px;margin:12px 0 0;
  background:linear-gradient(90deg,#8d1e14,#b3261e 65%,#c05a1c);
  color:#fff;border-radius:7px;border-left:4px solid #e8a33a;
  padding:9px 12px;font-family:system-ui,sans-serif}
.ldtag b{display:block;font-size:.92rem;font-weight:900;line-height:1.25;
  letter-spacing:.02em}
.ldtag small{display:block;font-size:.8rem;font-weight:600;line-height:1.35;
  margin-top:2px;opacity:.96}
.ldtag.big{padding:11px 14px;border-left-width:5px}
.ldtag.big b{font-size:1.06rem}
.ldtag.big small{font-size:.88rem}
/* The lamp is DRAWN, never typed: a diya emoji is a 2019 character and
   an older Android phone shows an empty box instead. */
.ldtag .ld-ic{width:27px;height:27px;flex:0 0 auto}
.ldtag.big .ld-ic{width:32px;height:32px}
.ldtag .ld-ic .fl{fill:#ffd166}
.ldtag .ld-ic .bo{fill:#f6e2c0}
.ldtag .ld-ic .wk{stroke:#f6e2c0;stroke-width:1.6;fill:none;stroke-linecap:round}
/* It sits above the share buttons, which already have a line of their
   own - two lines together looked like a mistake. */
.payline + .sharerow{border-top:0;padding-top:9px}

/* ==========================================================
   THE FESTIVAL BAND
   ========================================================== */
.tradband{background:var(--bg-soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:34px 0;margin-top:34px}
.tradhead{text-align:center;margin-bottom:20px}
.tradhead h2{margin:0 0 4px;font-size:1.5rem}
.tradhead p{margin:0;color:var(--ink-soft);font-size:.95rem;
  font-family:system-ui,sans-serif}
.trad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tradcard{border:1px solid #e6dfcc;border-radius:12px;overflow:hidden;
  background:#fffdf7}
.tradcard .art{display:block;width:100%;height:160px;object-fit:cover}
.tradcard .tx{padding:14px 15px}
.tradcard h3{margin:0 0 5px;font-size:1.05rem;color:#7a1b12}
.tradcard p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.55}
@media (max-width:760px){
  .trad{grid-template-columns:1fr}
  .tradband{padding:26px 0;margin-top:26px}
  .tradcard .art{height:150px}
}


/* ==========================================================
   WAITING FOR THE NEXT PAGE
   ==========================================================
   Drawn OVER the shop, never instead of it, and only once JavaScript
   is running - without it there is nothing to take the thing off
   again, so it must never appear at all. */
.pageload{position:fixed;top:0;right:0;bottom:0;left:0;
  z-index:70;display:none;
  background:rgba(255,253,246,.82);-webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px)}
.js-on .pageload.on{display:block}
.pl-bar{position:absolute;left:0;right:0;top:0;height:3px;background:#e8e2d2;
  overflow:hidden}
.pl-bar i{display:block;height:100%;width:42%;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--gold));
  animation:plSlide 1.1s ease-in-out infinite}
@keyframes plSlide{0%{margin-left:-42%}100%{margin-left:100%}}
.pl-mid{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;font-family:system-ui,sans-serif}
.pl-ring{position:relative;width:76px;height:76px;margin:0 auto 12px}
.pl-ring svg{position:absolute;top:0;left:0;width:76px;height:76px;
  animation:plSpin 1s linear infinite}
.pl-ring img{position:absolute;top:13px;left:13px;width:50px;height:50px;
  object-fit:contain}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl-tx{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
/* Somebody who has asked their phone to stop animations still gets the
   answer that their tap worked - it simply does not spin. */
@media (prefers-reduced-motion:reduce){
  .pl-ring svg,.pl-bar i{animation:none}
}
@media print{ .pageload{display:none !important} }

/* ===============================================================
   THE QUANTITY BUTTONS ON THE CHECKOUT
   People decide as they go. Until these existed, a customer who
   wanted a second jar had to go back to the bag and start the
   checkout again, and many simply did not bother.
   =============================================================== */
.colines{padding:12px 0}
.colines .info{display:flex;flex-direction:column;gap:7px}
.colines .conm{line-height:1.4}
.qrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.qstep{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:8px;overflow:hidden;background:#fff}
/* 38px square. A thumb that is not steady still lands on it, and that
   is the whole reason for the number - it is not a style choice. */
.qb{width:38px;height:38px;border:0;background:#f7f4ee;color:var(--ink);
  font:700 1.25rem/1 system-ui,sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.qb:hover{background:#ece6da}
.qb:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
/* Greyed at one, never removed: a button that disappears changes the
   shape of the row under a thumb already moving towards it. */
.qb.off{color:#c3bcb0;background:#faf8f4;cursor:default}
.qn{min-width:40px;text-align:center;padding:0 4px;
  font:700 1.02rem/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.qat{font-size:.88rem}
/* Spelled out. A bin icon is one more thing to decode. */
.qrm{border:0;background:none;color:var(--red);cursor:pointer;
  font:600 .85rem/1 system-ui,sans-serif;padding:6px 2px;
  text-decoration:underline}
.qrm:hover{color:#7d1a15}

/* ===============================================================
   FULFILLED BY RPR, and who carries the parcel
   Two separate promises, kept visually apart: WE pack it, THEY
   carry it. The courier names are words, never copied logos.
   =============================================================== */
.fulbox{border:1px solid var(--line);border-radius:10px;background:#faf8f4;
  padding:13px 14px;margin:16px 0 0;font-family:system-ui,sans-serif}
.fulbox.big{margin-top:14px}
.fulhead{display:flex;gap:11px;align-items:flex-start}
.fulbox b{display:block;font-size:.95rem;color:var(--ink)}
.fulbox small{display:block;font-size:.83rem;color:var(--ink-soft);
  margin-top:2px;line-height:1.45}
.fulbox .fi{width:22px;height:22px;flex:0 0 auto;fill:var(--green);margin-top:1px}
.fulbox .fi .tick{fill:none;stroke:#fff;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.fulships{display:flex;gap:11px;align-items:flex-start;margin-top:11px;
  padding-top:11px;border-top:1px solid #e8e2d7}
.fulships .fi{fill:#4a443c}
.cpills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.cpill{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font:600 .8rem/1.5 system-ui,sans-serif;color:#3d382f}
/* Used only when a real logo file has been put in assets/img/couriers. */
.cpills .clogo{height:22px;width:auto;max-width:94px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:2px 5px}

/* ---- narrow phones: these stay LAST in the file on purpose, so
        nothing further down can undo them ---- */
@media (max-width:430px){
  .ldtag{padding:8px 10px;gap:8px}
  .ldtag b{font-size:.86rem}
  .ldtag small{font-size:.76rem}
  .ldtag .ld-ic{width:24px;height:24px}
  /* The stepper and Remove get a line each rather than being squeezed
     into one that wraps badly mid-control. */
  .qrow{gap:9px}
  .qat{width:100%;order:3;margin-top:-2px}
  .cpill{font-size:.76rem;padding:3px 9px}
  .fulbox{padding:11px 12px}
}

/* The same drawn lamp in the bag and at the checkout, so the note and
   the tag are recognisably the same offer. */
.gn-diya{width:22px;height:22px;display:block}
.gn-diya .fl{fill:#e8a33a}
.gn-diya .bo{fill:#b3261e}
.gn-diya .wk{stroke:#b3261e;stroke-width:1.6;fill:none;stroke-linecap:round}
.giftnote.earned .gn-diya .bo{fill:#2f7d45}
.giftnote.earned .gn-diya .wk{stroke:#2f7d45}