/* ParfumCaravan — main stylesheet.

   The design tokens are NOT declared here. They live once, in critical.css,
   and inc/assets.php inlines that :root block on every page whether or not
   the rest of the critical CSS is switched on.

   They used to be copied into this file too, "so it works standalone" — and
   the copy drifted: a contrast fix applied to critical.css was silently
   undone here, because this stylesheet loads after the inline block. Two
   places to change one colour is one place too many. */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;border-radius:var(--pc-radius);
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em;line-height:1.2;
border:1.5px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.pc-btn--primary{background:var(--pc-magenta);color:var(--pc-white);border-color:var(--pc-magenta)}
.pc-btn--primary:hover{background:var(--pc-magenta-hover);border-color:var(--pc-magenta-hover)}
.pc-btn--ghost{background:transparent;color:var(--pc-ink);border-color:var(--pc-ink)}
.pc-btn--ghost:hover{background:var(--pc-ink);color:var(--pc-white)}
.pc-btn--light{background:var(--pc-white);color:var(--pc-ink);border-color:var(--pc-white)}
.pc-btn--light:hover{background:transparent;color:var(--pc-white);border-color:var(--pc-white)}
.pc-btn[disabled],.pc-btn.disabled{opacity:.5;pointer-events:none}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.pc-layout{display:block;padding-block:8px 48px}
.pc-layout--sidebar{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;
align-items:start}
.pc-layout__aside{position:sticky;top:24px}

.pc-section{padding-block:48px}
.pc-section__head{text-align:center;margin-bottom:28px}
.pc-section__eyebrow{margin:0 0 4px;font-family:var(--pc-font-head);font-size:13px;
letter-spacing:.08em;text-transform:uppercase;color:var(--pc-text-2);font-weight:500}
.pc-section__title{margin:0;font-size:clamp(20px,2.2vw,22px)}
.pc-section__more{margin:32px 0 0;text-align:center}

.pc-grid{display:grid;gap:16px}
.pc-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1200px){.pc-grid--5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){
.pc-layout--sidebar{grid-template-columns:1fr}
.pc-layout__aside{position:static}
.pc-grid--5,.pc-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
.pc-grid--5,.pc-grid--4,.pc-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-section{padding-block:32px}
}
/* Post cards carry a title and a paragraph, not a photo and a price. Two of
   them side by side on a phone leaves a column narrow enough to break the
   titles over four lines, so below 560px they stack. --3 is only ever a post
   grid: the front page's journal, the blog index and the archives. */
@media (max-width:560px){.pc-grid--3{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   2b. WooCommerce notices
   ==========================================================================

   Here rather than in shop.css because a notice is not a shop-page thing:
   WooCommerce queues them in the session and they surface on whatever page
   the shopper opens next, blog and static pages included. pc_wc_notices()
   prints them at the top of the theme's own templates — without it they
   waited in the session and ambushed the next product page. */

/* The gap below comes from the last notice's own 24px, which collapses
   through this plain div — zeroing it here would butt the block against the
   breadcrumb. */
.pc-notices{margin-block:20px 0}
.pc-notices:empty{display:none}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px;
padding:14px 18px;border-radius:var(--pc-radius);font-size:15px;
border:1px solid;list-style:none}
.woocommerce-message{background:var(--pc-success-bg);border-color:color-mix(in srgb, var(--pc-success) 35%, var(--pc-white));color:var(--pc-success)}
.woocommerce-info{background:var(--pc-info-bg);border-color:color-mix(in srgb, var(--pc-info) 25%, var(--pc-white));color:var(--pc-info)}
.woocommerce-error{background:var(--pc-error-bg);border-color:color-mix(in srgb, var(--pc-error) 25%, var(--pc-white));color:var(--pc-error);
flex-direction:column;align-items:flex-start}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;
padding:9px 18px;background:var(--pc-ink);color:var(--pc-white);border-radius:var(--pc-radius);
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em}
.woocommerce-message .button:hover,.woocommerce-info .button:hover{background:var(--pc-magenta)}

/* ==========================================================================
   3. Breadcrumbs, pagination
   ========================================================================== */

.pc-crumbs{padding-block:18px;font-family:var(--pc-font-head);font-size:11px;
letter-spacing:.06em;color:var(--pc-text-2)}
.pc-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-crumbs li+li::before{content:"/";margin-right:6px;color:var(--pc-muted)}
/* Breadcrumb links were 14px tall; padding gives them a thumb-sized target
   without changing how the trail looks. */
.pc-crumbs a{display:inline-block;padding-block:10px}
.pc-crumbs li{display:flex;align-items:center}
.pc-crumbs a:hover{color:var(--pc-magenta)}
.pc-crumbs [aria-current]{color:var(--pc-ink);font-weight:500}

/* On a phone the trail wrapped onto a second line, and the item that matters
   — where you actually are — ended up alone on the bottom row, indented
   behind a slash. One line that scrolls keeps the shape of a trail. It is
   started at the far end, because the current page is the useful end of it;
   the way back is a swipe, and the fade says there is more to the left. */
@media (max-width:768px){
.pc-crumbs{position:relative}
.pc-crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
-ms-overflow-style:none;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch}
.pc-crumbs ol::-webkit-scrollbar{display:none}
.pc-crumbs li{flex:none;white-space:nowrap}
.pc-crumbs.is-scrollable::before{content:"";position:absolute;inset-block:0;
inset-inline-start:0;width:24px;pointer-events:none;
background:linear-gradient(to right,var(--pc-white),transparent)}
}

/* Two paginations, one appearance.
 *
 * The theme draws its own on the blog and the archives, and WooCommerce
 * draws its own on the shop — different wrapper, different markup, the same
 * job. Styling only the theme's left the shop with a bare list: page numbers
 * one under another down the left edge, which is what an unstyled <ul> of
 * links looks like and what a broken page looks like too. */
.pc-pagination,.woocommerce-pagination{margin-top:40px}
/* WooCommerce puts `page-numbers` on the <ul> as well as on every link in
   it, so a rule written for the links lands on their container too — which
   turned the list into a 40px grid box and stacked the numbers down the left
   edge. Everything below is scoped to the links themselves. */
.pc-pagination ul,.woocommerce-pagination ul.page-numbers{display:flex;
flex-wrap:wrap;gap:6px;justify-content:center;margin:0;padding:0;
list-style:none;border:0}
.woocommerce-pagination li{margin:0;padding:0;border:0}
.pc-pagination a.page-numbers,.pc-pagination span.page-numbers,
.woocommerce-pagination li>.page-numbers{
display:grid;place-items:center;min-width:40px;height:40px;
padding:0 12px;border:1px solid var(--pc-line);border-radius:var(--pc-radius);
font-size:14px;font-weight:500;background:var(--pc-white);color:var(--pc-ink)}
.pc-pagination a.page-numbers:hover,.woocommerce-pagination li>a.page-numbers:hover{
border-color:var(--pc-ink)}
.pc-pagination .page-numbers.current,.woocommerce-pagination li>.page-numbers.current{
background:var(--pc-ink);border-color:var(--pc-ink);color:var(--pc-white)}
.pc-pagination .page-numbers.dots,.woocommerce-pagination li>.page-numbers.dots{
border-color:transparent;background:transparent}

/* ==========================================================================
   4. Search dropdown
   ========================================================================== */

.pc-search__results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
background:var(--pc-white);border:1px solid var(--pc-line);border-radius:var(--pc-radius);
box-shadow:var(--pc-shadow-lg);max-height:min(70vh,460px);overflow-y:auto;padding:6px}
.pc-search__results[hidden]{display:none}
.pc-result{display:flex;gap:12px;align-items:center;padding:8px;border-radius:var(--pc-radius)}
.pc-result:hover,.pc-result.is-active{background:var(--pc-bg)}
.pc-result img{width:44px;height:44px;object-fit:contain;flex:0 0 44px;background:var(--pc-bg);
border-radius:4px}
.pc-result>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-result__title{display:block;font-size:14px;font-weight:500;line-height:1.35;
color:var(--pc-ink)}
.pc-result__price{display:block;font-size:13px;color:var(--pc-magenta);font-weight:600}
.pc-result__price del{color:var(--pc-muted);font-weight:400;margin-right:4px}
/* WooCommerce price markup arrives whole from the search engine: keep the
   RRP label legible and the range dash from running into the numbers. */
.pc-result__price ins{text-decoration:none;background:none;color:inherit}
.pc-result__price .pc-price__rrp-label{margin-right:3px;font-size:10px;
	font-weight:600;letter-spacing:.04em;color:var(--pc-muted);
	text-decoration:none;border:0}
.pc-result__price .pc-price__rrp{color:var(--pc-muted);font-weight:400;margin-right:5px}
.pc-result--all{justify-content:center;font-family:var(--pc-font-head);font-size:12px;
font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--pc-magenta);
padding:12px}
.pc-result--empty,.pc-result--loading{padding:14px;font-size:14px;color:var(--pc-text-2);
text-align:center}

/* ==========================================================================
   5. Mobile drawer
   ========================================================================== */

.pc-drawer{position:fixed;inset:0 auto 0 0;width:min(88vw,340px);z-index:90;
background:var(--pc-white);display:flex;flex-direction:column;
transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--pc-shadow-lg)}
.pc-drawer[hidden]{display:flex}
.pc-drawer.is-open{transform:none}
.pc-drawer__head{display:flex;align-items:center;justify-content:space-between;
padding:16px;border-bottom:1px solid var(--pc-line)}
.pc-drawer__title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pc-drawer__close{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--pc-radius)}
.pc-drawer__nav{flex:1;overflow-y:auto;padding:8px}
.pc-drawer__foot{padding:16px;border-top:1px solid var(--pc-line)}
.pc-drawer__foot .pc-btn{width:100%}
.pc-menu__list--stack{display:block}
.pc-menu__list--stack .pc-menu__item{border-bottom:1px solid var(--pc-line)}
.pc-menu__list--stack .pc-menu__item:last-child{border-bottom:0}
.pc-menu__list--stack .pc-menu__link{display:block;padding:14px 12px;color:var(--pc-ink);
font-size:16px;border-radius:0}
.pc-menu__list--stack .pc-menu__link:hover{background:var(--pc-bg)}
.pc-backdrop{position:fixed;inset:0;z-index:80;background:rgba(17,17,17,.45);
opacity:0;transition:opacity .2s}
.pc-backdrop.is-open{opacity:1}
html.pc-locked,body.pc-locked{overflow:hidden}
body.pc-locked{padding-right:var(--pc-scrollbar,0px)}

/* Submenus */
.pc-submenu{position:absolute;top:100%;left:0;min-width:220px;z-index:50;
background:var(--pc-white);border:1px solid var(--pc-line);border-radius:var(--pc-radius);
box-shadow:var(--pc-shadow-lg);padding:6px;display:none}
.pc-menu__item--parent:hover>.pc-submenu,.pc-submenu.is-open{display:block}
.pc-submenu .pc-menu__link{display:block;color:var(--pc-ink);padding:9px 12px;font-size:14px}
.pc-submenu .pc-menu__link:hover{background:var(--pc-bg);color:var(--pc-magenta)}
.pc-menu__toggle{display:none}
.pc-menu__list--stack .pc-menu__item--parent{position:relative}
.pc-menu__list--stack .pc-menu__toggle{display:grid;place-items:center;
position:absolute;top:4px;right:4px;width:44px;height:44px;color:var(--pc-text-2);
transition:transform .18s}
.pc-menu__list--stack .pc-menu__toggle[aria-expanded="true"]{transform:rotate(90deg)}
.pc-menu__list--stack .pc-submenu{position:static;border:0;box-shadow:none;
padding:0 0 8px 12px;border-radius:0}

/* ==========================================================================
   6. Home page
   ========================================================================== */

/* Four guarantees, in the theme's own register: no fills, no boxes, just a
   quiet accent icon and two lines of type at different weights. The grid
   states the count rather than letting the tiles wrap unevenly — three on a
   row and one alone underneath is the shape this is meant to avoid.

   `margin-block:0`, not `margin:0`. The <ul> also carries .pc-container,
   whose `margin-inline:auto` is what centres every other band on the page —
   and a blanket `margin:0` here, written to kill the list's default top and
   bottom, quietly killed the centring too. The strip then sat 100px left of
   the axis the product grid below it uses.

   The tracks share the width rather than shrinking to their text. Four tiles
   sized to their own content — 186, 197, 154 and 144px here — leave gaps
   that read as uneven no matter where the group is placed, and the whole
   thing floats as an island above a full-width grid. Sharing the width puts
   the first icon on the grid's left edge and the last tile's text at its
   right, so the band belongs to the page. */
.pc-usps{display:grid;grid-template-columns:repeat(var(--pc-usp-cols,4),minmax(0,1fr));
gap:20px 32px;padding-block:22px;margin-block:0;list-style:none;
border-block:1px solid var(--pc-line)}
.pc-usps--1{--pc-usp-cols:1}
.pc-usps--2{--pc-usp-cols:2}
.pc-usps--3{--pc-usp-cols:3}
.pc-usp{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pc-usps svg{color:var(--pc-magenta);flex:0 0 auto;margin-top:1px}
.pc-usp__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-usp__title{font-size:14px;font-weight:600;line-height:1.3;color:var(--pc-ink)}
.pc-usp__note{font-size:13px;line-height:1.4;color:var(--pc-text-2)}
@media (max-width:900px){.pc-usps{--pc-usp-cols:2;gap:18px 32px}}
/* Two on a row on a phone as well. Stacked, four guarantees became four
   screens' worth of scrolling before the first product; paired, they are one
   block that is read at a glance. The columns go back to sharing the width
   here — at this size there is none to spare, and the text needs all of it. */
@media (max-width:560px){
.pc-usps{gap:16px 18px}
.pc-usp{gap:8px}
.pc-usp__title{font-size:13px}
.pc-usp__note{font-size:12px}
}

.pc-hero{position:relative;overflow:hidden;border-radius:var(--pc-radius-lg);
background:linear-gradient(105deg,var(--pc-magenta-hover) 0%,var(--pc-magenta) 55%,color-mix(in srgb, var(--pc-magenta-hover) 65%, #000) 100%);
color:var(--pc-white);padding:clamp(32px,5vw,64px)}
.pc-hero::after{content:"";position:absolute;right:-80px;top:-60px;width:420px;height:420px;
border-radius:50%;background:rgba(255,255,255,.07)}
.pc-hero__body{position:relative;z-index:1;max-width:640px}
.pc-hero__eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;opacity:.85}
.pc-hero__title{margin:0 0 12px;font-family:var(--pc-font-head);font-weight:600;
letter-spacing:-.01em;font-size:clamp(30px,5vw,52px);line-height:1.05}
.pc-hero__sub{margin:0 0 24px;font-size:clamp(15px,1.6vw,18px);opacity:.92;max-width:52ch}

/* The plain heading — the default. Set like the section titles below it,
   one size up, so it reads as the page's own line and not as a banner that
   arrived from a campaign. Left-aligned on purpose: it is a sentence about
   the shop, and the grids under it start at the same edge. */
.pc-intro{padding-block:20px 4px;max-width:72ch}
.pc-intro__eyebrow{margin:0 0 6px;font-family:var(--pc-font-head);font-size:13px;
letter-spacing:.08em;text-transform:uppercase;color:var(--pc-text-2);font-weight:500}
.pc-intro__title{margin:0 0 8px;font-family:var(--pc-font-head);font-weight:500;
letter-spacing:-.01em;font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.pc-intro__sub{margin:0;font-size:15px;line-height:1.55;color:var(--pc-text-2)}
.pc-intro__link{white-space:nowrap;color:var(--pc-magenta);font-weight:500;text-decoration:none}
.pc-intro__link:hover{text-decoration:underline}
@media (max-width:768px){.pc-intro{padding-block:14px 0}.pc-intro__sub{font-size:14px}}

/* "De ce Caravan" — prose on the left, the four reasons on the right, on the
   grey ground so it reads as a pause between two product grids rather than
   a fifth one. The tiles reuse the guarantees' shape; only the box differs. */
.pc-why{padding-block:24px}
.pc-why__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 56px;
align-items:center;padding:clamp(28px,4vw,48px);background:var(--pc-bg);border-radius:var(--pc-radius-lg)}
.pc-why__title{margin:0 0 12px;font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.15}
.pc-why__text{margin:0;font-size:15px;line-height:1.6;color:var(--pc-text-2);max-width:52ch}
.pc-why__more{margin:22px 0 0}
.pc-why__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;
margin:0;padding:0;list-style:none}
.pc-why__item{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pc-why__item svg{color:var(--pc-magenta);flex:0 0 auto;margin-top:1px}
.pc-why__item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-why__item-title{font-size:14px;font-weight:600;line-height:1.3;color:var(--pc-ink)}
.pc-why__item-note{font-size:13px;line-height:1.4;color:var(--pc-text-2)}
@media (max-width:900px){.pc-why__inner{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:560px){
.pc-why{padding-block:16px}
.pc-why__inner{padding:22px 18px}
.pc-why__list{gap:16px 18px}
.pc-why__item{gap:8px}
.pc-why__item-title{font-size:13px}
.pc-why__item-note{font-size:12px}
}

/* Brands — a row of logos, each on the grey ground the cards use, the
   name under it. A brand without a logo shows its initial in the same box,
   so the row stays a row. The tiles are logo-sized (at most 220px, 4:3)
   and centred, so four brands make a short row in the middle rather than
   four product-sized squares across the page. */
.pc-brands{padding-block:24px}
.pc-brands__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,220px));
justify-content:center;gap:16px;margin:0;padding:0;list-style:none}
.pc-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
color:var(--pc-ink);text-decoration:none}
.pc-brand__logo{display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:14%;
background:var(--pc-bg);border-radius:var(--pc-radius-lg);overflow:hidden;transition:background-color .15s}
.pc-brand:hover .pc-brand__logo{background:var(--pc-line)}
.pc-brand__logo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pc-brand__initial{font-family:var(--pc-font-head);font-size:clamp(28px,4vw,44px);font-weight:500;
color:var(--pc-text-2)}
.pc-brand__name{font-family:var(--pc-font-head);font-size:14px;font-weight:500;line-height:1.3}
.pc-brand__count{font-size:12px;color:var(--pc-muted);margin-top:-6px}
/* On the brands page the grid fills the column, left-aligned, as a list.
   It is printed by a shortcode inside the page's prose, so the prose rules
   have to be undone here — the reading column widens to the page, the
   bullets, underlines and magenta links go, and the images lose the prose
   margins. Otherwise "Brands List" was a 760px column of underlined initials
   with a bullet in front of each tile. */
.pc-prose:has(.pc-brands__grid--page){max-width:none}
.pc-brands__grid--page{justify-content:start;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-block:8px 24px}
.pc-prose .pc-brands__grid{list-style:none;padding:0;margin-inline:0}
.pc-prose .pc-brands__grid li{margin:0}
.pc-prose .pc-brands__grid a{color:var(--pc-ink);text-decoration:none}
.pc-prose .pc-brands__grid a:hover .pc-brand__name{color:var(--pc-magenta)}
.pc-prose .pc-brands__grid img{border-radius:0;margin:0}
.pc-prose .pc-brand__initial{text-decoration:none}
@media (max-width:560px){.pc-brands__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* The picture banner — image and text side by side on the grey ground,
   stacked on a phone with the picture first. */
.pc-banner-wrap{padding-block:24px}
.pc-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
overflow:hidden;background:var(--pc-bg);border-radius:var(--pc-radius-lg)}
.pc-banner--right .pc-banner__media{order:-1}
.pc-banner__media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.pc-banner__body{padding:clamp(28px,4vw,56px)}
.pc-banner__eyebrow{margin:0 0 8px;font-family:var(--pc-font-head);font-size:13px;letter-spacing:.08em;
text-transform:uppercase;color:var(--pc-text-2);font-weight:500}
.pc-banner__title{margin:0 0 12px;font-size:clamp(24px,2.8vw,34px);font-weight:500;line-height:1.12}
.pc-banner__text{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--pc-text-2);max-width:48ch}
@media (max-width:768px){
.pc-banner{grid-template-columns:minmax(0,1fr)}
.pc-banner--right .pc-banner__media,.pc-banner__media{order:-1}
.pc-banner__media img{aspect-ratio:16/10}
.pc-banner__body{padding:22px 18px 26px}
}

/* The brand's name on a card, above the title. */
.pc-card__brand{margin:0 0 2px;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--pc-text-2);line-height:1.3}
.pc-card__brand a{color:inherit;text-decoration:none}
.pc-card__brand a:hover{color:var(--pc-magenta)}

/* Hero with a photograph: words left, picture right, on the grey ground.
   The picture is a product shot on white, so it sits in its own white
   panel inside the band rather than floating on the sand. */
.pc-hero-photo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;
gap:clamp(24px,4vw,56px);padding:clamp(24px,3.5vw,48px);background:var(--pc-bg);border-radius:var(--pc-radius-lg)}
.pc-hero-photo__eyebrow{margin:0 0 10px;font-family:var(--pc-font-head);font-size:13px;letter-spacing:.1em;
text-transform:uppercase;color:var(--pc-text-2);font-weight:500}
.pc-hero-photo__title{margin:0 0 14px;font-family:var(--pc-font-head);font-weight:500;letter-spacing:-.01em;
font-size:clamp(28px,3.6vw,44px);line-height:1.08}
.pc-hero-photo__sub{margin:0 0 24px;font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:var(--pc-text-2);max-width:52ch}
.pc-hero-photo__media{background:var(--pc-white);border-radius:var(--pc-radius-lg);overflow:hidden}
.pc-hero-photo__media img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;padding:6%}
@media (max-width:768px){
.pc-hero-photo{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
.pc-hero-photo__media{order:-1}
.pc-hero-photo__media img{aspect-ratio:16/10}
.pc-hero-photo__title{font-size:clamp(24px,7vw,30px)}
}

/* Entry tiles reuse the category tile; the product photo is contained on
   the grey ground instead of cropped, because a bottle cut in half is not
   a door anyone opens. */
.pc-tiles{padding-block:24px 8px}
.pc-tiles .pc-section__head{margin-bottom:18px}
.pc-cats__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-cats__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-cat--product{aspect-ratio:4/3;background:var(--pc-bg)}
.pc-cat--product .pc-cat__img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
@media (max-width:768px){.pc-cats__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pc-cat--product{aspect-ratio:1}.pc-cat--product .pc-cat__label{left:10px;bottom:10px;padding:6px 10px;font-size:11px}}

.pc-cats{padding-block:8px 8px}
.pc-cats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pc-cat{position:relative;display:block;overflow:hidden;border-radius:var(--pc-radius);
background:var(--pc-bg);aspect-ratio:3/2}
.pc-cat__img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pc-cat:hover .pc-cat__img{transform:scale(1.04)}
.pc-cat__label{position:absolute;left:16px;bottom:16px;padding:8px 16px;
background:var(--pc-magenta);color:var(--pc-white);border-radius:var(--pc-radius);
font-family:var(--pc-font-head);font-size:13px;font-weight:500;text-transform:uppercase;
letter-spacing:.06em}
@media (max-width:768px){.pc-cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pc-home__content{padding-block:32px}

/* ==========================================================================
   7. Post cards, blog, prose
   ========================================================================== */

.pc-post-card{display:flex;flex-direction:column;background:var(--pc-white);
border:1px solid var(--pc-line);border-radius:var(--pc-radius);overflow:hidden;
box-shadow:var(--pc-shadow)}
.pc-post-card__media img{aspect-ratio:3/2;object-fit:cover;width:100%}
.pc-post-card__body{padding:18px}
.pc-post-card__date{font-family:var(--pc-font-head);font-size:12px;letter-spacing:.06em;
text-transform:uppercase;color:var(--pc-text-2)}
.pc-post-card__title{margin:6px 0 8px;font-size:20px;line-height:1.25}
.pc-post-card__title a:hover{color:var(--pc-magenta)}
.pc-post-card__excerpt{margin:0;font-size:14px;color:var(--pc-text-2)}

/* On a phone the cards are stacked, and a full-width 3:2 photo on top of each
   one turns three articles into three screens — the section doubled in height
   the moment the posts got featured images. Laid on its side, the photo keeps
   its job of telling you which article this is without pushing the next one
   off the screen. The excerpt is clamped rather than shortened server-side:
   the same card is read whole on the archive, where there is room for it. */
@media (max-width:560px){
.pc-post-card{flex-direction:row;align-items:stretch}
.pc-post-card__media{position:relative;flex:0 0 38%;align-self:stretch}
.pc-post-card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.pc-post-card__body{flex:1 1 auto;min-width:0;padding:14px}
.pc-post-card__title{font-size:17px;margin:4px 0 6px}
.pc-post-card__title,.pc-post-card__excerpt{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.pc-post-card__title{-webkit-line-clamp:3}
.pc-post-card__excerpt{-webkit-line-clamp:3;font-size:13px}
}

.pc-archive-head{padding-block:8px 20px}
.pc-archive-head__title{margin:0;font-size:clamp(28px,4vw,42px)}
.pc-archive-head__desc{color:var(--pc-text-2);max-width:70ch}

.pc-page{padding-block:8px 56px}
.pc-page__title{font-size:clamp(28px,4vw,42px);margin-bottom:24px}

.pc-single-post{padding-block:8px 40px}
.pc-single-post__title{font-size:clamp(28px,4vw,44px);margin-bottom:10px}
.pc-single-post__meta{font-family:var(--pc-font-head);font-size:12px;color:var(--pc-text-2);
text-transform:uppercase;letter-spacing:.06em}
.pc-single-post__meta a:hover{color:var(--pc-magenta)}
.pc-dot{margin-inline:8px}
/* A band, not a wall: the pictures the blog has are product shots, square
   and 800px tall, and printed at column width they pushed the first
   paragraph a whole screen down. Held to 2:1 and contained on the grey
   ground they read as the cards do; a landscape photo fits the band as it
   is. */
.pc-single-post__media{margin:24px 0 32px}
.pc-single-post__media img{width:100%;aspect-ratio:2/1;object-fit:contain;
background:var(--pc-bg);border-radius:var(--pc-radius-lg)}
.pc-single-post__tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.pc-single-post__tags a{padding:6px 12px;background:var(--pc-bg);border-radius:99px;
font-size:13px;color:var(--pc-text-2)}
.pc-single-post__tags a:hover{background:var(--pc-magenta);color:var(--pc-white)}

.pc-prose{max-width:760px;font-size:17px;line-height:1.7}
.pc-prose h2{font-size:clamp(24px,3vw,30px);margin:1.6em 0 .5em}
.pc-prose h3{font-size:clamp(20px,2.4vw,24px);margin:1.4em 0 .4em}
.pc-prose a{color:var(--pc-magenta);text-decoration:underline;text-underline-offset:2px}
.pc-prose ul,.pc-prose ol{margin:0 0 1.2em;padding-left:1.3em}
.pc-prose ul{list-style:disc}
.pc-prose ol{list-style:decimal}
.pc-prose li{margin-bottom:.4em}
.pc-prose img{border-radius:var(--pc-radius);margin-block:1.4em}
.pc-prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;
border-left:3px solid var(--pc-magenta);font-size:1.15em;color:var(--pc-text-2)}
.pc-prose table{width:100%;border-collapse:collapse;margin-block:1.4em;font-size:15px}
.pc-prose th,.pc-prose td{border:1px solid var(--pc-line);padding:10px 12px;text-align:left}
.pc-prose th{background:var(--pc-bg);font-weight:600}
.pc-prose code{background:var(--pc-bg);padding:2px 6px;border-radius:3px;font-size:.9em}

.pc-empty,.pc-404{text-align:center;padding-block:64px 80px;max-width:560px;
margin-inline:auto}
.pc-empty__title,.pc-404__title{font-size:clamp(26px,4vw,36px);margin-bottom:10px}
.pc-empty__text,.pc-404__text{color:var(--pc-text-2);margin-bottom:24px}
.pc-empty .pc-search,.pc-404 .pc-search{margin-bottom:24px}
.pc-404__code{font-family:var(--pc-font-head);font-size:clamp(90px,18vw,180px);
line-height:.9;color:var(--pc-bg);margin:0 0 -.15em;font-weight:600}

/* ==========================================================================
   8. Widgets, comments
   ========================================================================== */

.pc-widget{margin-bottom:32px;font-size:15px}
.pc-widget__title{font-family:var(--pc-font-head);font-size:13px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
padding-bottom:10px;border-bottom:1px solid var(--pc-line)}
.pc-widget ul li{padding:6px 0}
.pc-widget a:hover{color:var(--pc-magenta)}

.pc-comments{margin-top:48px;padding-top:32px;border-top:1px solid var(--pc-line);
max-width:760px}
.pc-comments__title{font-size:24px;margin-bottom:24px}
.pc-comments__list,.pc-comments__list .children{list-style:none;padding:0}
.pc-comments__list .children{padding-left:28px;margin-top:16px}
.pc-comments__list li{margin-bottom:24px}
.pc-comments .comment-body{background:var(--pc-bg);padding:16px 18px;
border-radius:var(--pc-radius)}
.pc-comments .comment-meta{font-size:13px;color:var(--pc-text-2);margin-bottom:8px}
.pc-comments .avatar{border-radius:50%;display:inline-block;vertical-align:middle;
margin-right:8px}
.pc-comments input[type=text],.pc-comments input[type=email],.pc-comments input[type=url],
.pc-comments textarea{width:100%;padding:11px 13px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);font-size:15px;background:var(--pc-white)}
.pc-comments textarea{min-height:140px;resize:vertical}
.pc-comments .comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start;
font-size:14px}
.pc-comments .comment-form-cookies-consent input{width:auto;margin-top:5px}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.pc-footer{background:var(--pc-footer-bg);color:var(--pc-footer-text);margin-top:64px}
.pc-footer__grid{display:grid;grid-template-columns:1.4fr 1.2fr 1fr 1fr .9fr;gap:40px;
padding-block:56px 40px}
.pc-footer__logo{margin:0 0 14px;font-family:var(--pc-font-wordmark);font-size:30px;
font-weight:600;letter-spacing:.02em;text-transform:lowercase}
.pc-footer__about{font-size:15px;color:var(--pc-footer-text);margin-bottom:16px;max-width:40ch}
/* The h1 on the front page, a paragraph elsewhere — same size either way,
   one step up from the about text, so the rank changes nothing visible. */
.pc-footer__tagline{margin:0 0 10px;font-family:var(--pc-font-head);font-size:17px;font-weight:500;
line-height:1.35;letter-spacing:.01em;color:var(--pc-footer-heading,var(--pc-footer-text));max-width:36ch}
.pc-footer__address{display:flex;flex-direction:column;gap:6px;font-style:normal;
font-size:14px;color:var(--pc-footer-text)}
.pc-footer__address a:hover{color:var(--pc-magenta)}
.pc-footer__title{font-family:var(--pc-font-head);font-size:15px;font-weight:500;
letter-spacing:.02em;margin-bottom:16px;color:var(--pc-white)}
.pc-footer__menu li,.pc-footer__posts li{margin-bottom:12px;font-size:14px;color:var(--pc-footer-text);
line-height:1.45}
.pc-footer__menu a:hover,.pc-footer__posts a:hover{color:var(--pc-white);text-decoration:underline}
.pc-footer__posts time{display:block;font-size:12px;color:var(--pc-footer-muted);margin-top:4px}
.pc-footer__col--anpc{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* The link columns are <details>. On desktop the summary is a heading again:
   no marker, no pointer, and no way to collapse a column that has room to
   stay open. */
.pc-footer__col--fold > summary{list-style:none;cursor:default}
.pc-footer__col--fold > summary::-webkit-details-marker{display:none}
.pc-footer__col--fold > summary::marker{content:""}
.pc-footer__col--anpc img{border-radius:3px}
.pc-footer__bar{border-top:1px solid rgba(255,255,255,.12)}
.pc-footer__bar-inner{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
justify-content:space-between;padding-block:20px}
.pc-footer__copy{margin:0;font-size:13px;color:var(--pc-footer-muted)}
.pc-footer__legal{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--pc-footer-muted)}
.pc-footer__legal a:hover{color:var(--pc-white)}

@media (max-width:1024px){
.pc-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media (max-width:560px){
.pc-footer__grid{grid-template-columns:1fr}
}

/* --- Folded footer -------------------------------------------------------
   Below this width the columns collapse. Forty links stacked in one column
   is most of a screen the buyer has to scroll past; three headings is a
   footer they can read. theme.js closes them, so without JavaScript they
   stay open and nothing is hidden. */
@media (max-width:768px){
	.pc-footer__grid{gap:0;padding-block:36px 28px}
	.pc-footer__col--fold{border-top:1px solid var(--pc-footer-line,rgba(255,255,255,.14))}
	.pc-footer__col--fold:last-of-type{border-bottom:1px solid var(--pc-footer-line,rgba(255,255,255,.14))}
	.pc-footer__col--fold > summary{position:relative;display:flex;align-items:center;
		justify-content:space-between;margin:0;padding:16px 2px;cursor:pointer}
	/* A chevron built from a rotated corner, so the row costs no icon. */
	.pc-footer__col--fold > summary::after{content:"";width:8px;height:8px;
		margin-inline-end:4px;border-right:1.5px solid currentColor;
		border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
		transition:transform .18s ease}
	.pc-footer__col--fold[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
	.pc-footer__col--fold > :not(summary){padding-bottom:6px}
	.pc-footer__col--brand{padding-bottom:24px}
	.pc-footer__col--anpc{padding-top:24px}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
	.pc-footer__col--fold > summary::after{transition:none}
}

/* ==========================================================================
   10. Back to top
   ========================================================================== */

.pc-totop{position:fixed;right:20px;bottom:20px;z-index:70;width:44px;height:44px;
display:grid;place-items:center;background:var(--pc-white);color:var(--pc-ink);
border:1px solid var(--pc-line);border-radius:50%;box-shadow:var(--pc-shadow-lg);
opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.pc-totop.is-visible{opacity:1;transform:none}
.pc-totop[hidden]{display:grid}
.pc-totop:hover{background:var(--pc-magenta);color:var(--pc-white);border-color:var(--pc-magenta)}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   11. Product card (site-wide: shop, home, search, related)
   ========================================================================== */

ul.products{display:grid;gap:16px;grid-template-columns:repeat(var(--pc-cols,5),minmax(0,1fr));
list-style:none;margin:0;padding:0}
ul.products li.product{display:flex;min-width:0}
.pc-card-wrap{display:flex;min-width:0}

.pc-card{position:relative;display:flex;flex-direction:column;width:100%;
background:var(--pc-white);border:1px solid var(--pc-line);border-radius:var(--pc-radius);
padding:12px;box-shadow:var(--pc-shadow);
transition:box-shadow .18s ease,border-color .18s ease}
.pc-card:hover{box-shadow:var(--pc-shadow-lg);border-color:var(--pc-line)}

.pc-card__media{position:relative;display:block;margin-bottom:11px;
background:var(--pc-bg);border-radius:4px;overflow:hidden;aspect-ratio:1}
.pc-card__img{width:100%;aspect-ratio:1;object-fit:contain}

.pc-card__title{margin:0 0 6px;font-family:var(--pc-font-head);
font-size:16px;font-weight:500;line-height:1.35;letter-spacing:.02em}
.pc-card__title a{color:var(--pc-ink)}
.pc-card__title a:hover{color:var(--pc-magenta)}

.pc-card__inspired{margin:0 0 6px;font-size:12px;color:var(--pc-muted);line-height:1.35}
/* 71% of products have reviews, so in most rows one card has stars and its
   neighbour does not — and everything under them sits at a different height.
   Holding the row's height keeps the grid readable as a grid. */
.pc-rating{min-height:28px}
.pc-rating--none{min-height:28px}
.pc-card__inspired span{color:var(--pc-text-2)}

.pc-card__price{margin-top:auto;font-family:var(--pc-font-body);font-size:16px;
font-weight:600;line-height:1.3;letter-spacing:.01em}
.pc-card__price del{font-size:14px;font-weight:400;color:var(--pc-muted);margin-right:6px}
.pc-card__price ins{text-decoration:none;color:var(--pc-magenta)}
.pc-card__price .amount{color:var(--pc-magenta)}
.pc-card__price del .amount{color:var(--pc-muted)}
.pc-from{font-size:13px;font-weight:400;color:var(--pc-text-2)}

.pc-savings{margin:6px 0 0;padding:5px 9px;background:var(--pc-success-bg);color:var(--pc-success);
border-radius:4px;font-size:12px;font-weight:600}
.pc-savings--single{display:inline-block;margin:10px 0 0}

.pc-card__cart{margin-top:10px;width:100%;padding:11px 14px}
.pc-card .added_to_cart{display:none}

/* Badges */
.pc-badges{position:absolute;top:7px;left:7px;z-index:2;display:flex;
flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
.pc-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;
border-radius:3px;font-family:var(--pc-font-head);font-size:10px;font-weight:600;
letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.pc-badge--sale{background:var(--pc-magenta);color:var(--pc-white)}
.pc-badge--best{background:var(--pc-sale);color:var(--pc-white)}
.pc-badge--new{background:var(--pc-ink);color:var(--pc-white)}
.pc-badge--gift{background:color-mix(in srgb, var(--pc-magenta) 12%, var(--pc-white));color:var(--pc-magenta)}

/* Stock line */
.pc-stock{display:flex;align-items:center;gap:5px;margin:0 0 6px;
font-family:var(--pc-font-body);font-size:13px;font-weight:600}
.pc-stock--in{color:var(--pc-success)}
.pc-stock--out{color:var(--pc-muted)}
/* Low stock has no tick to show — it is not reassurance. The dot matches the
   one on the product page's notice, so the two read as one message. */
.pc-stock--low{color:var(--pc-warning);font-weight:600}
.pc-stock--low::before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor;flex:0 0 auto}

/* Star rating (WooCommerce markup) */
/* Stars, score, count — one line, one baseline.
   At 14px the stars read as decoration beside the title; at 24px they read
   as a rating, which is what a shopper is scanning the card for. The score
   carries the weight, the count stands back: it is there to qualify the
   figure, not to compete with it. */
.pc-rating{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.pc-rating .star-rating{font-size:24px}
.pc-rating__score{font-size:14px;font-weight:600;color:var(--pc-ink);
font-variant-numeric:tabular-nums}
.pc-rating__count{margin-left:-2px;font-size:13px;color:var(--pc-muted);
font-variant-numeric:tabular-nums}
/* Stars.

   WooCommerce draws these with a bundled icon font called "star", declared
   inside woocommerce-general.css — which this theme does not load. Rather
   than pull in a whole stylesheet for one glyph, the stars are the actual
   ★ character (U+2605, text presentation, no emoji fallback).

   The box is sized by the glyphs rather than by a fixed 5.4em: that figure
   was WooCommerce's, for WooCommerce's star font, and the system symbol font
   this theme falls back to is visibly narrower — leaving a gap between the
   stars and whatever sits next to them. Keeping ::before in normal flow lets
   the element measure itself, and the overlay's percentage width is then a
   percentage of the real five-star run, on any platform's font. */
.star-rating{position:relative;display:inline-block;height:1em;
font-family:"Segoe UI Symbol","Apple Symbols","Arial Unicode MS",sans-serif;
font-size:14px;line-height:1;letter-spacing:0;white-space:nowrap;
overflow:hidden;color:var(--pc-star)}
/* No tracking, so no trailing gap to trim either — the two go together, and
   leaving the negative margin behind would clip the fifth star. */
.star-rating::before{content:"\2605\2605\2605\2605\2605";display:block;
color:var(--pc-line)}
.star-rating span{position:absolute;left:0;top:0;overflow:hidden;padding-top:1.5em;
white-space:nowrap}
.star-rating span::before{content:"\2605\2605\2605\2605\2605";position:absolute;left:0;top:0}
.woocommerce-review-link{font-size:13px;color:var(--pc-text-2);margin-left:6px}

@media (max-width:1200px){ul.products{--pc-cols:4}}
@media (max-width:1024px){ul.products{--pc-cols:3}}
@media (max-width:768px){
ul.products{--pc-cols:2;gap:12px}
.pc-card{padding:10px}
.pc-card__title{font-size:14px}
.pc-card__price{font-size:17px}
}

/* Loading state on AJAX add-to-cart — the card button, the product page's
   own button and the sticky copy of it on a phone: one spinner, the label
   hidden under it, so a tap is answered the same everywhere. */
.pc-card__cart.loading,
.single-product button.single_add_to_cart_button.loading,
.pc-sticky-atc__btn.loading{position:relative;color:transparent!important;pointer-events:none}
.pc-card__cart.loading::after,
.single-product button.single_add_to_cart_button.loading::after,
.pc-sticky-atc__btn.loading::after{content:"";position:absolute;top:50%;left:50%;
width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
border:2px solid rgba(255,255,255,.4);border-top-color:var(--pc-white);
animation:pc-spin .7s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;
margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   12. Product family switch + RRP price
   ========================================================================== */

.pc-family{margin:0 0 18px}
.pc-family__label{display:block;margin-bottom:8px;font-family:var(--pc-font-head);
font-size:14px;font-weight:500;letter-spacing:.02em}
.pc-family__options{display:flex;flex-wrap:wrap;gap:8px}
.pc-family__option{display:inline-flex;align-items:center;justify-content:center;
min-width:84px;padding:11px 18px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);background:var(--pc-white);
font-family:var(--pc-font-head);font-size:14px;font-weight:500;letter-spacing:.02em;
color:var(--pc-ink);transition:border-color .15s,background-color .15s,color .15s}
a.pc-family__option:hover{border-color:var(--pc-ink)}
.pc-family__option.is-current{background:var(--pc-ink);border-color:var(--pc-ink);color:var(--pc-white)}
.pc-family__option.is-out{color:var(--pc-muted);border-style:dashed}
.pc-family__option.is-out:hover{border-color:var(--pc-faint)}

.pc-family__reviews-note{margin:0 0 16px;padding:10px 14px;background:var(--pc-bg);
border-radius:var(--pc-radius);font-size:13px;color:var(--pc-text-2)}

/* RRP: the reference price is labelled, never a bare strikethrough. */
.pc-price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pc-price__rrp{display:inline-flex;align-items:baseline;gap:5px;
font-family:var(--pc-font-body);font-size:13px;font-weight:400;color:var(--pc-muted)}
.pc-price__rrp-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;border:0;cursor:help}
.pc-price__rrp del{text-decoration:line-through}
.pc-price__now{color:var(--pc-magenta);font-weight:600}
.pc-card__price .pc-price__now,.single-product .price .pc-price__now{color:var(--pc-magenta)}
.pc-card__price .pc-price{gap:2px 8px}
.pc-card__price .pc-price__rrp{font-size:12px}

/* ==========================================================================
   13. Add-to-cart modal

   Built on <dialog>: the browser supplies the backdrop, Escape, focus
   trapping and inertness of the page behind, so none of that is
   reimplemented here.
   ========================================================================== */

/* 900 wide on a desktop: the three suggestions get card-sized pictures
   instead of thumbnails, and the line item reads at the size of the page it
   sits on. It was 640 and looked like a notification. */
.pc-modal{width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 48px);
padding:0;border:0;border-radius:var(--pc-radius-lg);background:var(--pc-white);
color:var(--pc-ink);box-shadow:0 24px 64px rgba(0,0,0,.22);overflow:visible}
.pc-modal::backdrop{background:rgba(17,17,17,.5)}
.pc-modal:not([open]){display:none}
/* overscroll-behavior stops the flick that reaches the end of the modal from
   carrying on into the page underneath — the browser's scroll chaining, which
   the locked body alone does not prevent on a touchscreen. */
.pc-modal__inner{display:flex;flex-direction:column;max-height:calc(100vh - 48px);
overflow-y:auto;overscroll-behavior:contain}

.pc-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px 20px;border-bottom:1px solid var(--pc-line)}
.pc-modal__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;
font-family:var(--pc-font-head);font-size:13px;font-weight:500;letter-spacing:.06em;
text-transform:uppercase;color:var(--pc-success)}
.pc-modal__close{display:grid;place-items:center;width:36px;height:36px;
border-radius:var(--pc-radius);color:var(--pc-text-2)}
.pc-modal__close:hover{background:var(--pc-bg);color:var(--pc-ink)}

.pc-modal__item{display:flex;align-items:center;gap:14px;padding:18px 20px}
.pc-modal__item img{width:72px;height:72px;object-fit:contain;background:var(--pc-bg);
border-radius:4px;flex:0 0 72px}
.pc-modal__item-name{margin:0 0 4px;font-family:var(--pc-font-head);font-size:16px;
font-weight:500;letter-spacing:.02em;line-height:1.3}
.pc-modal__item-meta{margin:0;font-size:14px;color:var(--pc-text-2)}
/* Where the cart modal shows the line item, the back-in-stock one has only
   a sentence to deliver — so it gets the same slot and the same padding. */
.pc-modal__note{padding:18px 20px}
.pc-modal__note p{margin:0;font-size:15px;line-height:1.55;color:var(--pc-ink)}

.pc-modal__shipping{margin:0 20px 18px;padding:14px 16px;border-radius:var(--pc-radius);
background:var(--pc-bg);font-size:14px}
.pc-modal__shipping p{margin:0}
.pc-modal__shipping.is-free{background:var(--pc-success-bg);color:var(--pc-success);font-weight:600}
.pc-modal__bar{margin-top:10px;height:5px;border-radius:3px;background:var(--pc-line);
overflow:hidden}
.pc-modal__bar span{display:block;height:100%;background:var(--pc-magenta);border-radius:3px;
transition:width .3s ease}

.pc-modal__suggest{padding:0 20px 18px;border-top:1px solid var(--pc-line);padding-top:18px}
.pc-modal__suggest[hidden]{display:none}
.pc-modal__suggest-title{margin:0 0 14px;font-size:15px;font-weight:500;letter-spacing:.02em}
/* Three tiles is the usual row, and they share the width. A shortlist can
   come back shorter, though, and neither obvious answer works: left in a
   three-wide grid the gap reads as a tile that failed to load, and stretched
   to fill it a suggestion ends up bigger than the product just added. So a
   short row keeps the tile at its normal size and centres what there is. */
.pc-modal__suggest-grid{display:grid;gap:12px;justify-content:center;
grid-template-columns:repeat(var(--pc-suggest-cols,3),minmax(0,var(--pc-suggest-w,1fr)))}
.pc-suggest{display:flex;flex-direction:column;gap:6px;min-width:0}
.pc-suggest__media img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--pc-bg);
border-radius:4px}
.pc-suggest__name{font-size:13px;line-height:1.35;color:var(--pc-ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-suggest__name:hover{color:var(--pc-magenta)}
.pc-suggest__price{margin:0;font-size:13px;font-weight:600;color:var(--pc-magenta)}
.pc-suggest__add{margin-top:auto;padding:9px 10px;border:1px solid var(--pc-ink);
border-radius:var(--pc-radius);background:var(--pc-white);color:var(--pc-ink);text-align:center;
font-family:var(--pc-font-head);font-size:11px;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;transition:background-color .15s,color .15s}
.pc-suggest__add:hover{background:var(--pc-ink);color:var(--pc-white)}
.pc-suggest__add.loading{opacity:.6;pointer-events:none}

.pc-modal__foot{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--pc-line);
background:var(--pc-bg);position:sticky;bottom:0}
.pc-modal__foot .pc-btn{flex:1;padding-inline:14px}

@media (min-width:900px){
.pc-modal__head{padding:20px 28px}
.pc-modal__item{gap:20px;padding:22px 28px}
.pc-modal__item img{width:96px;height:96px;flex-basis:96px}
.pc-modal__item-name{font-size:18px}
.pc-modal__item-meta{font-size:15px}
.pc-modal__note{padding:22px 28px}
.pc-modal__shipping{margin:0 28px 22px;padding:16px 18px;font-size:15px}
.pc-modal__suggest{padding:22px 28px}
.pc-modal__suggest-title{font-size:16px;margin-bottom:16px}
.pc-modal__suggest-grid{gap:20px}
.pc-suggest__name{font-size:14px}
.pc-suggest__price{font-size:14px}
.pc-suggest__add{padding:11px 12px}
.pc-modal__foot{padding:18px 28px;gap:14px}
}

@media (max-width:560px){
.pc-modal{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;
border-radius:var(--pc-radius-lg) var(--pc-radius-lg) 0 0}
.pc-modal__inner{max-height:92vh}
.pc-modal__suggest-grid{gap:8px}
.pc-suggest__name{font-size:12px}
.pc-modal__foot{flex-direction:column-reverse}
}

/* --- Sticky bottom bar (phones) -----------------------------------------
   Hidden above the breakpoint entirely: on a desktop the header never
   leaves, so there is nothing for this to solve. */
.pc-tabbar{display:none}

@media (max-width:1024px){
	.pc-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
		display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
		background:var(--pc-white);border-top:1px solid var(--pc-line);
		padding-bottom:env(safe-area-inset-bottom)}
	.pc-tabbar__item{display:flex;flex-direction:column;align-items:center;
		justify-content:center;gap:3px;padding:8px 4px 7px;min-height:56px;
		color:var(--pc-text-2);text-decoration:none}
	.pc-tabbar__item.is-current{color:var(--pc-magenta)}
	.pc-tabbar__icon{position:relative;display:grid;place-items:center;line-height:0}
	.pc-tabbar__label{font-size:11px;line-height:1.1;letter-spacing:.01em}
	.pc-tabbar__count{position:absolute;top:-5px;inset-inline-start:12px;
		min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;
		border-radius:99px;background:var(--pc-magenta);color:var(--pc-white);
		font-size:10px;font-weight:700;line-height:1}
	/* An author `display` beats the browser's own [hidden] rule no matter the
	   specificity, so a badge hidden at zero has to be hidden here too —
	   without this the bar shows a "0" over an empty cart. */
	.pc-tabbar__count[hidden]{display:none}

	/* The page has to end above the bar, or the last row of anything sits
	   underneath it — including the footer's legal links. */
	body:has(.pc-tabbar) .pc-footer{padding-bottom:64px}

	/* Two fixed bars would stack; the product page keeps its add-to-cart. */
	body:has(.pc-sticky-atc.is-visible) .pc-tabbar{display:none}

	/* Back-to-top would land on top of the bar. */
	body:has(.pc-tabbar) .pc-totop{bottom:72px}

	/* And so would the WhatsApp bubble, which is not ours.
	 *
	 * Joinchat pins itself to the bottom left at z-index 9000 — above every
	 * bar on this page, which sit at 50 and 55. On a phone it covered the
	 * first tab of the bar below, and on a product page the thumbnail, the
	 * first letter of the name and the leading digits of the price in the
	 * add-to-cart bar. Lifting our bars over 9000 would only swap which
	 * thing is buried, so the bubble is what moves.
	 *
	 * Through `--bottom`, the plugin's own handle on its offset. Its wrapper
	 * uses `transform` for the entrance animation, so setting the position
	 * that way would fix the overlap by breaking the way it arrives.
	 *
	 * Both clearances carry the safe-area inset, because both bars reserve
	 * it: without it the bubble sits right on the home indicator's strip on
	 * every iPhone that has one. */
	body:has(.pc-tabbar) .joinchat{--bottom:calc(72px + env(safe-area-inset-bottom))}

	/* The add-to-cart bar is the taller of the two, and it replaces the tab
	   bar rather than joining it — so this is not extra clearance on top of
	   the rule above, it is the other case. */
	body:has(.pc-sticky-atc.is-visible) .joinchat{--bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* The drawer's foot: the account, then the ways to reach a person. */
.pc-drawer__foot{display:flex;flex-direction:column;gap:2px;padding:12px 8px;
border-top:1px solid var(--pc-line)}
.pc-drawer__account,.pc-drawer__contact{display:flex;align-items:center;gap:11px;
padding:12px;border-radius:var(--pc-radius);font-size:14px;color:var(--pc-ink);
text-decoration:none}
.pc-drawer__account{font-weight:500}
.pc-drawer__contact{color:var(--pc-text-2);font-size:13.5px}
.pc-drawer__account .pc-icon,.pc-drawer__contact .pc-icon{flex:0 0 auto;color:var(--pc-text-2)}
.pc-drawer__account:hover,.pc-drawer__contact:hover{background:var(--pc-bg);color:var(--pc-magenta)}
.pc-drawer__account:hover .pc-icon,.pc-drawer__contact:hover .pc-icon{color:var(--pc-magenta)}

/* ==========================================================================
   Favorite
   ========================================================================== */

/* The header entry needs a positioning context for its counter, which the
   plain action links do not have. */
.pc-actions__fav{position:relative}
.pc-actions__count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;
padding:0 5px;border-radius:9px;background:var(--pc-magenta);color:var(--pc-white);
font-size:10px;font-weight:700;line-height:17px;text-align:center}
.pc-actions__count[hidden]{display:none}

/* The heart itself. Outline until it is on, then filled — the fill is the
   whole signal, so nothing else about the button moves. */
.pc-fav{display:inline-flex;align-items:center;justify-content:center;gap:8px;
color:var(--pc-ink);background:var(--pc-white);cursor:pointer;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
transition:color .15s,border-color .15s,background-color .15s}
.pc-fav svg{fill:none;transition:fill .15s}
.pc-fav:hover{color:var(--pc-magenta);border-color:var(--pc-magenta)}
.pc-fav.is-on{color:var(--pc-magenta);border-color:var(--pc-magenta)}
.pc-fav.is-on svg{fill:currentColor}

/* On a card it floats over the image, opposite the badges, which sit left. */
.pc-fav--card{position:absolute;top:14px;right:14px;z-index:2;
width:34px;height:34px;border-radius:50%;
background:color-mix(in srgb, var(--pc-white) 88%, transparent);
backdrop-filter:blur(2px)}
.pc-fav--card .pc-fav__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Beside the buy button it is a square, matching the button's height so the
   row reads as one control group. */
.pc-fav--single{width:52px;flex:0 0 auto;align-self:stretch}
.pc-fav--single .pc-fav__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:600px){
	.pc-fav--card{top:10px;right:10px;width:32px;height:32px}
}
/* The count beside the drawer's Favorites row, right-aligned like a badge. */
.pc-drawer__count{margin-inline-start:auto;min-width:20px;height:20px;padding:0 6px;
display:grid;place-items:center;border-radius:99px;
background:var(--pc-magenta);color:var(--pc-white);font-size:11px;font-weight:700}
.pc-drawer__count[hidden]{display:none}