/* =============================================================
   Daily Care — the second storefront pillar.

   Same house: Fraunces headings, Jakarta body, the same radii, the
   same button and card shapes. Different room: the cream and leaf
   green give way to a cooler slate-teal, and every aisle carries its
   own accent through the --aisle custom property.
   ============================================================= */

.care-section {
  --care-ink:#12303A;
  --care-ink-2:#1B4250;
  --care-surface:#F3F7F8;
  --care-line:#DCE6E9;
  --care-accent:#2E8B84;
  --care-muted:#5F7480;
  --care-shadow:0 14px 34px rgba(18,48,58,.14);
}

/* The care pages sit on a cool ground rather than the cream one. */
.care-section{background:var(--care-surface)}
.care-bg{background:#EAF1F3}

.care-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--care-accent);margin-bottom:16px;
}

/* ---------------------------------------------------------------
   Buttons — the brand shapes, recoloured for this section
   --------------------------------------------------------------- */
.care-btn{--btn-bg:var(--care-ink);--btn-fg:#fff}
.care-btn:hover{--btn-bg:var(--care-accent);box-shadow:0 12px 28px rgba(46,139,132,.3)}
.care-btn-ghost{--btn-bg:rgba(255,255,255,.1);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.34)}
.care-btn-ghost:hover{--btn-bg:#fff;--btn-fg:var(--care-ink);--btn-bd:transparent;box-shadow:var(--shadow)}
.care-btn-outline{--btn-bg:transparent;--btn-fg:var(--care-ink);--btn-bd:var(--care-line)}
.care-btn-outline:hover{--btn-bg:#fff;--btn-bd:var(--care-accent);--btn-fg:var(--care-accent);box-shadow:none}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.care-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(148deg,var(--care-ink) 0%,var(--care-ink-2) 58%,#22596A 100%);
  color:#DCEAEE;padding:clamp(44px,6vw,76px) 0;
}
.care-hero::after{
  content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;
  border-radius:50%;background:rgba(255,255,255,.05);
}
.care-hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.care-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:18px}
.care-hero-sub{
  font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.75;
  color:rgba(226,240,243,.86);max-width:54ch;margin-bottom:30px;
}
.care-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}

.care-hero-points{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.88rem;font-weight:600}
.care-hero-points li{display:inline-flex;align-items:center;gap:9px;color:rgba(226,240,243,.82)}
.care-hero-points .svg-ico{color:var(--honey-300)}

/* promise stack */
.care-promise{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);padding:24px;backdrop-filter:blur(6px);
}
.care-promise-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.care-promise-row:first-child{padding-top:0}
.care-promise-row:last-of-type{border-bottom:0;padding-bottom:6px}
.care-promise-ico{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:rgba(255,255,255,.12);color:var(--honey-300);
}
.care-promise-row strong{display:block;color:#fff;font-size:.95rem;margin-bottom:3px}
.care-promise-row span{display:block;font-size:.85rem;line-height:1.6;color:rgba(226,240,243,.74)}
.care-desk-link{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;
  padding:12px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);
  font-weight:700;font-size:.9rem;color:#fff;transition:background .18s;
}
.care-desk-link:hover{background:rgba(255,255,255,.22)}

/* ---------------------------------------------------------------
   Aisle grid
   --------------------------------------------------------------- */
.aisle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.aisle-card{
  position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  padding:22px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--care-line);box-shadow:var(--shadow-xs);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.aisle-card::before{
  content:"";position:absolute;inset:auto -40% -70% 40%;height:150px;border-radius:50%;
  background:var(--aisle);opacity:.08;transition:all .34s var(--ease);
}
.aisle-card:hover{transform:translateY(-5px);box-shadow:var(--care-shadow);border-color:transparent}
.aisle-card:hover::before{inset:auto -30% -55% -10%;opacity:.16}
.aisle-ico{
  position:relative;z-index:2;display:grid;place-items:center;width:54px;height:54px;
  border-radius:16px;background:color-mix(in srgb,var(--aisle) 13%,#fff);color:var(--aisle);
  transition:transform .24s var(--ease);
}
.aisle-card:hover .aisle-ico{transform:scale(1.07) rotate(-4deg)}
.aisle-body{position:relative;z-index:2;flex:1}
.aisle-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-weight:800;font-size:1.04rem;line-height:1.3;color:var(--care-ink);margin-bottom:6px;
}
.aisle-tag{display:block;font-size:.86rem;line-height:1.55;color:var(--care-muted)}
.aisle-foot{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px dashed var(--care-line);
}
.aisle-count{font-size:.8rem;font-weight:700;color:var(--care-muted)}
.aisle-go{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:color-mix(in srgb,var(--aisle) 12%,#fff);color:var(--aisle);
  transition:all .2s var(--ease);
}
.aisle-card:hover .aisle-go{background:var(--aisle);color:#fff;transform:translateX(3px)}

.aisle-18{
  font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.06em;
  padding:3px 7px;border-radius:var(--r-pill);
  background:var(--danger-bg);color:var(--danger);
}
.aisle-18.lg{font-size:.8rem;padding:5px 11px;vertical-align:middle;margin-left:8px}

/* ---------------------------------------------------------------
   Shelf chips
   --------------------------------------------------------------- */
.shelf-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:30px}
.shelf-row.tight{margin:0 0 20px}
.shelf-label{
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--care-muted);margin-right:4px;
}
.chip-n{
  font-size:.7rem;font-weight:800;opacity:.55;
  padding-left:6px;margin-left:2px;border-left:1px solid currentColor;
}

/* ---------------------------------------------------------------
   Discreet delivery panel
   --------------------------------------------------------------- */
.discreet-panel{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  background:#fff;border:1px solid var(--care-line);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-sm);
}
.discreet-panel h2{color:var(--care-ink);font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:14px}
.discreet-panel > div > p{color:var(--care-muted);line-height:1.75;margin-bottom:22px}
.discreet-list{display:grid;gap:11px;margin-bottom:26px}
.discreet-list li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--ink-2);line-height:1.55}
.discreet-list .tick{
  flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;
  border-radius:50%;background:var(--care-accent);color:#fff;
}
.parcel-art{text-align:center;color:var(--care-ink)}
.parcel-art > svg{width:100%;max-width:340px;margin-inline:auto}
.parcel-note{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:.8rem;font-weight:700;color:var(--care-muted);
}
.parcel-note .svg-ico{width:14px;height:14px;flex:none}

/* ---------------------------------------------------------------
   Trust cards
   --------------------------------------------------------------- */
.care-trust-card{
  background:#fff;border:1px solid var(--care-line);border-radius:var(--r-lg);
  padding:24px;transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.care-trust-card:hover{transform:translateY(-4px);box-shadow:var(--care-shadow)}
.care-trust-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  background:#E4EFF0;color:var(--care-accent);margin-bottom:14px;
}
.care-trust-card h4{font-family:var(--font-body);font-size:1rem;font-weight:800;margin-bottom:8px;color:var(--care-ink)}
.care-trust-card p{font-size:.88rem;line-height:1.65;color:var(--care-muted);margin:0}

/* ---------------------------------------------------------------
   Care desk band
   --------------------------------------------------------------- */
.care-desk{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:center;
  background:linear-gradient(140deg,var(--care-ink),#215a6b);
  border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);color:#DCEAEE;
}
.care-desk h2{color:#fff;margin-bottom:12px}
.care-desk p{color:rgba(226,240,243,.82);line-height:1.75;margin:0}
.care-desk-actions{display:grid;gap:12px;justify-items:stretch}
.care-desk-hours{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-size:.84rem;color:rgba(226,240,243,.7);
}

/* ---------------------------------------------------------------
   Aisle page
   --------------------------------------------------------------- */
.aisle-hero{
  background:linear-gradient(160deg,color-mix(in srgb,var(--aisle) 14%,#fff),var(--care-surface));
  border-bottom:1px solid var(--care-line);padding:32px 0;
}
.aisle-hero-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aisle-hero-ico{
  flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:20px;
  background:var(--aisle);color:#fff;box-shadow:0 12px 26px color-mix(in srgb,var(--aisle) 34%,transparent);
}
.aisle-hero h1{margin-bottom:6px;color:var(--care-ink);font-size:clamp(1.7rem,3.4vw,2.6rem)}
.aisle-hero-tag{margin:0;color:var(--care-muted);max-width:70ch;line-height:1.65}
.aisle-hero-count{
  margin-left:auto;text-align:right;font-size:.86rem;color:var(--care-muted);
}
.aisle-hero-count strong{
  display:block;font-family:var(--font-display);font-size:1.9rem;
  font-weight:700;color:var(--aisle);line-height:1;
}

/* regulatory / safety line under the aisle hero */
.care-note{
  display:flex;gap:12px;align-items:flex-start;margin:20px 0 -10px;
  padding:14px 18px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid #EFDDA6;color:#6E5400;
  font-size:.9rem;line-height:1.6;
}
.care-note span{flex:none;margin-top:1px}

/* ---------------------------------------------------------------
   Age gate
   --------------------------------------------------------------- */
.age-gate{
  max-width:640px;margin:20px auto 10px;text-align:center;
  background:#fff;border:1px solid var(--care-line);border-radius:var(--r-xl);
  padding:clamp(30px,5vw,52px);box-shadow:var(--shadow-sm);
}
.age-gate-mark{
  display:inline-grid;place-items:center;width:74px;height:74px;margin-bottom:20px;
  border-radius:50%;background:var(--danger-bg);color:var(--danger);
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
}
.age-gate h2{color:var(--care-ink);margin-bottom:14px}
.age-gate > p{color:var(--care-muted);line-height:1.75;max-width:52ch;margin:0 auto 26px}
.age-gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.age-gate-note{
  margin:26px 0 0;padding-top:20px;border-top:1px dashed var(--care-line);
  font-size:.85rem;line-height:1.6;color:var(--care-muted);
}
.age-gate-note .svg-ico{margin-right:5px;color:var(--care-accent)}

/* ---------------------------------------------------------------
   Aisle switcher at the foot of a listing
   --------------------------------------------------------------- */
.aisle-switch{margin-top:44px;padding-top:26px;border-top:1px solid var(--care-line)}
.aisle-switch-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.aisle-mini{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  border-radius:var(--r-pill);background:#fff;border:1px solid var(--care-line);
  font-size:.88rem;font-weight:700;color:var(--care-ink);transition:all .18s var(--ease);
}
.aisle-mini:hover{border-color:var(--aisle);color:var(--aisle);transform:translateY(-2px)}
.aisle-mini-ico{color:var(--aisle);display:grid}
.aisle-mini-n{font-size:.74rem;font-weight:800;color:var(--care-muted)}

/* Care pages keep the store's product card but swap its warm accents for cool ones. */
.care-section .p-media{background:linear-gradient(160deg,#EDF3F4,#E1ECEE)}
.care-section .p-card:hover{border-color:#BFD8DC}
.care-section .p-cat{color:var(--care-accent)}
.care-section .p-now{color:var(--care-ink)}
.care-section .p-stock.in{color:var(--care-accent)}
.care-section .btn-primary{--btn-bg:var(--care-ink)}
.care-section .btn-primary:hover{--btn-bg:var(--care-accent)}
.care-section .btn-outline{--btn-fg:var(--care-ink);--btn-bd:var(--care-line)}
.care-section .btn-outline:hover{--btn-bg:#fff;--btn-bd:var(--care-accent);--btn-fg:var(--care-accent)}
.care-section .p-tool:hover{background:var(--care-accent)}
.care-section .eyebrow{color:var(--care-accent)}
.care-section .table th{background:#E4EFF0;color:var(--care-ink)}
.care-section .acc-item.open{border-color:#BFD8DC}
.care-section .acc-item.open .mark{background:var(--care-accent)}
.care-section .chip.active{background:var(--care-ink);border-color:var(--care-ink)}
.care-section .chip:hover{border-color:var(--care-accent);color:var(--care-accent);background:#fff}
.care-section .chip.active:hover{color:#fff;background:var(--care-ink)}
.care-section .pagination .current{background:var(--care-ink);border-color:var(--care-ink)}
.care-section .empty-state .ico{color:#BFD8DC}
.care-section .shop-toolbar{background:#fff;border-color:var(--care-line)}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:1100px){
  .aisle-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .care-hero-grid,.discreet-panel,.care-desk{grid-template-columns:1fr}
  .care-promise{order:2}
  .parcel-art{order:-1}
  .aisle-hero-count{margin-left:0;text-align:left;width:100%}
}
@media (max-width:760px){
  .aisle-grid{grid-template-columns:repeat(2,1fr)}
  .care-hero-points{gap:8px 18px;font-size:.83rem}
}
@media (max-width:480px){
  .aisle-grid{grid-template-columns:1fr}
  .age-gate-actions .btn{width:100%}
}