/* ParfumCaravan — WooCommerce pages.
   Loaded only on shop, product, cart, checkout and account pages.
   WooCommerce's own three stylesheets are dequeued.

   The product CARD lives in theme.css, not here: it is rendered on the
   home page and in search results too, where this file is not loaded. */

/* ==========================================================================
   1. Shop shell
   ========================================================================== */

.pc-shop-wrap{padding-bottom:56px}
.pc-shop-main{min-width:0}

/* With a sidebar the wrapper becomes a two-column grid; the breadcrumb spans
   both so it stays flush with the page edge. */
.pc-shop-wrap--sidebar{display:grid;grid-template-columns:260px minmax(0,1fr);
column-gap:32px;align-items:start}
.pc-shop-wrap--sidebar>.pc-crumbs{grid-column:1/-1}
.pc-shop-sidebar{position:sticky;top:20px}

.pc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding-block:14px;border-block:1px solid var(--pc-line);margin-bottom:24px;flex-wrap:wrap}
.pc-toolbar__filters{display:inline-flex;align-items:center;gap:8px;font-size:14px;
font-weight:500}
.pc-toolbar__filters:hover{color:var(--pc-magenta)}
.pc-toolbar__right{display:flex;align-items:center;gap:20px;margin-left:auto}
.woocommerce-result-count{margin:0;font-size:14px;color:var(--pc-text-2)}
.woocommerce-ordering select{height:40px;padding:0 34px 0 12px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);background:var(--pc-white);font-size:14px;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center}

/* On a phone the count and the dropdown cannot share a row: "Afișez singurul
   rezultat" is four words competing with a control that needs the full width,
   and the count ends up broken across three lines beside it. Stacked, with
   the count as the caption it actually is. */
@media (max-width:768px){
	.pc-toolbar{display:grid;grid-template-columns:1fr;gap:10px;
		padding-block:12px;margin-bottom:16px}
	.pc-toolbar__filters{justify-self:start}
	.pc-toolbar__right{display:grid;grid-template-columns:1fr;gap:6px;
		margin-left:0;width:100%}
	.woocommerce-result-count{font-size:13px;order:-1}
	.woocommerce-ordering{width:100%}
	.woocommerce-ordering select{width:100%;height:46px;font-size:16px}
}

@media (max-width:1024px){
.pc-shop-wrap--sidebar{grid-template-columns:1fr}
.pc-shop-sidebar{position:static;display:none}
.pc-shop-sidebar.is-open{display:block}
}

/* ==========================================================================
   2. Single product
   ========================================================================== */

/* position:relative matters: the sale/bestseller badges are absolutely
   positioned, and without a positioned ancestor here they escape to the
   top-left of the viewport. */
.single-product div.product{position:relative;padding-block:16px 48px}
/* Gallery + summary only. Everything after them — accordion, related — is a
   plain block below, which is also what bounds the sticky gallery. */
.pc-product__top{position:relative;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:48px;align-items:start}
.single-product .pc-product__top>.pc-badges{top:16px;left:16px;gap:6px}
.single-product .pc-product__top>.pc-badges .pc-badge{font-size:11px;padding:5px 10px}
/* WooCommerce ships the gallery with an inline opacity:0 that its own
   script clears once flexslider is ready. It covers the no-JavaScript case
   with a <noscript> override, but not the case where JavaScript runs and
   the script errors — then the product image stays invisible for good.
   Reveal it regardless after a beat. */
.single-product .woocommerce-product-gallery{position:relative;min-width:0;
animation:pc-gallery-reveal 0s linear 1.2s forwards}
@keyframes pc-gallery-reveal{to{opacity:1}}
.single-product .woocommerce-product-gallery__wrapper{margin:0}

/* The summary is usually the taller column — stock, buy row, delivery, the
   olfactory pyramid — so the photograph scrolls out of sight while the buyer
   is still reading about it. Sticky keeps it in view until the two columns
   end level. It is a no-op when the gallery is the taller of the two, which
   is why it needs no height test. Only above the breakpoint: stacked on a
   phone, a sticky image would sit on top of the text. */
@media (min-width:901px){
	.single-product .woocommerce-product-gallery{position:sticky;top:24px}
}
.single-product .woocommerce-product-gallery__image img{width:100%;
max-height:min(70vh,620px);object-fit:contain;border-radius:var(--pc-radius)}
.single-product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;
margin:14px 0 0;padding:0;list-style:none}
.single-product .flex-control-thumbs li{width:84px}
.single-product .flex-control-thumbs img{border:1px solid var(--pc-line);
border-radius:4px;cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--pc-magenta)}
.single-product .woocommerce-product-gallery__trigger{position:absolute;top:12px;right:12px;
z-index:3;width:40px;height:40px;display:grid;place-items:center;background:var(--pc-white);
border:1px solid var(--pc-line);border-radius:50%;font-size:0;
box-shadow:var(--pc-shadow);transition:background-color .15s,color .15s}
.single-product .woocommerce-product-gallery__trigger:hover{background:var(--pc-magenta);
color:var(--pc-white);border-color:var(--pc-magenta)}
/* WooCommerce puts a 🔍 emoji in this button. font-size:0 made it invisible
   but not gone: a zero-sized <span> is still a grid item, so the button had
   two children and place-items centred the pair rather than the arrow —
   which is why the icon sat off-centre. Removing it from the box entirely
   leaves the pseudo-element alone in the cell. It carries aria-hidden and
   the link has its own label, so nothing is lost.

   What replaces it was the character ⤢, a text glyph sitting among stroked
   SVG icons — a different weight in every font, and visibly not part of the
   set. This is the same geometry as the theme's own icons, masked so it
   still takes currentColor on hover. */
.single-product .woocommerce-product-gallery__trigger>span{display:none}
.single-product .woocommerce-product-gallery__trigger::after{content:"";
display:block;width:18px;height:18px;background:currentColor;
-webkit-mask:var(--pc-icon-expand) center/contain no-repeat;
mask:var(--pc-icon-expand) center/contain no-repeat}

.single-product .summary{min-width:0}
.single-product .product_title{margin:0 0 10px;font-size:clamp(21px,1.7vw,24px);
font-weight:500;letter-spacing:.02em}

/* The brand line on the product page, and the logo on the brand archive. */
.pc-single__brand{margin:0 0 8px;font-size:14px;color:var(--pc-text-2)}
.pc-single__brand a{color:var(--pc-ink);font-weight:500;text-decoration:none}
.pc-single__brand a:hover{color:var(--pc-magenta)}
.pc-archive__brand{display:inline-flex;align-items:center;gap:14px}
.pc-archive__logo{width:56px;height:56px;object-fit:contain;border-radius:var(--pc-radius);
background:var(--pc-bg);padding:6px}
.pc-single__inspired{margin:0 0 14px;font-size:14px;color:var(--pc-text-2)}
.pc-single__inspired span{color:var(--pc-ink);font-weight:500;
border-bottom:1px solid var(--pc-line)}

/* Rating sits under the title, on one line: stars, score, review count.
   Stacked, the stars and the number they stand for read as two separate
   claims; side by side they read as one. */
.pc-rating-block{display:flex;flex-direction:row;align-items:center;
flex-wrap:wrap;gap:4px 8px;margin:0 0 18px}
/* The stars are sized in em, so this one value scales the whole control.
   It is deliberately larger than the score beside it: the ★ glyph inks about
   54% of its em against 74% for the digits, so matching font sizes would
   make the stars look shrunken. 30px is the shop's call — bigger than the
   level-ink figure of 20px, so the row leads with the rating. */
.pc-rating-block .star-rating{font-size:30px}
.pc-rating-block__meta{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:5px;
font-family:var(--pc-font-body);font-size:14px;color:var(--pc-text-2)}
.pc-rating-block__meta strong{font-size:15px;font-weight:600;color:var(--pc-ink)}
.pc-rating-block__meta:hover{color:var(--pc-magenta)}
.pc-rating-block__meta:hover strong{color:var(--pc-magenta)}
.pc-rating-block__count{text-decoration:underline;text-underline-offset:2px}
.pc-rating-block--empty{margin:0 0 18px}
.pc-rating-block--empty a{font-size:14px;color:var(--pc-magenta);
text-decoration:underline;text-underline-offset:2px}

/* Price and the saving line, grouped. */
.pc-single__pricerow{margin:0 0 20px}
.single-product .price{display:block;margin:0;font-family:var(--pc-font-body);
font-size:32px;font-weight:700;line-height:1.15;letter-spacing:.01em}
.single-product .price del{font-size:20px;font-weight:400;color:var(--pc-muted);
margin-right:10px}
.single-product .price ins{text-decoration:none}
.single-product .price ins .amount,.single-product .price>.amount{color:var(--pc-magenta)}
.single-product .price del .amount{color:var(--pc-muted)}

/* RRP reads as a caption above the price, not as a competing number. */
.single-product .price .pc-price{display:flex;flex-direction:column;align-items:flex-start;
gap:2px}
.single-product .price .pc-price__rrp{font-size:14px}
.single-product .price .pc-price__rrp del{font-size:14px;margin:0}
.single-product .price .pc-price__now{font-size:32px}

.woocommerce-product-details__short-description{margin:18px 0;font-size:15px;
color:var(--pc-text-2);line-height:1.65}
.woocommerce-product-details__short-description p:last-child{margin-bottom:0}

/* What the bottle is: two facts on one line, not two cards on two rows.
   Each card cost about 72px of a phone screen between the price and the
   button; as a single line the same information costs 24px. */
.pc-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
list-style:none;margin:14px 0 18px;padding:0}
.pc-fact{display:inline-flex;align-items:center;gap:7px;
font-size:14px;font-weight:500;color:var(--pc-ink)}
.pc-fact svg{color:var(--pc-magenta);flex:0 0 auto}

/* Delivery promises, below the button — reassurance where the decision is
   made rather than in front of the price. */
.pc-promise{display:flex;align-items:center;gap:9px;margin:12px 0 0;
font-size:13px;line-height:1.45;color:var(--pc-text-2)}
.pc-promise svg{color:var(--pc-success);flex:0 0 auto}

/* Stock pill */
/* margin-right, not a flex gap: these are siblings printed by two separate
   hooks with no whitespace between them, so without it any two that do end
   up on the same line share an edge and read as one broken control. */
.pc-pill{display:inline-flex;align-items:center;gap:8px;margin:0 10px 14px 0;
padding:9px 16px;border-radius:var(--pc-radius);font-size:15px;font-weight:600;
border:1px solid}
.pc-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pc-pill--in{color:var(--pc-success);border-color:color-mix(in srgb, var(--pc-success) 35%, var(--pc-white));background:var(--pc-success-bg)}
.pc-pill--out{color:var(--pc-error);border-color:color-mix(in srgb, var(--pc-error) 25%, var(--pc-white));background:var(--pc-error-bg)}

/* Add to cart */
.single-product form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;
margin:0 0 20px}
.single-product form.cart.variations_form{display:block}
.quantity{display:inline-flex;align-items:stretch;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);overflow:hidden;background:var(--pc-white)}
.quantity .pc-qty__btn{width:42px;display:grid;place-items:center;font-size:18px;
color:var(--pc-text-2);line-height:1}
.quantity .pc-qty__btn:hover{background:var(--pc-bg);color:var(--pc-ink)}
.quantity input.qty{width:52px;height:48px;border:0;text-align:center;font-size:15px;
font-weight:600;appearance:textfield;-moz-appearance:textfield}
/* The global focus ring drew itself around the bare input, which sits flush
   between the two buttons — so it read as two magenta lines through the
   middle of the control rather than as "this is focused". Moved to the
   wrapper, where it outlines the thing the buyer is actually using. The ring
   stays: without it a keyboard user has no idea where they are. */
.quantity input.qty:focus-visible{outline:0}
.quantity:has(input.qty:focus-visible){outline:2px solid var(--pc-magenta);
outline-offset:2px;border-radius:var(--pc-radius)}
/* Nothing to choose, so nothing to show: the wrapper keeps its border and
   padding even when WooCommerce has hidden the field inside it, which would
   leave an empty box beside the buy button. Covers the cart too, wherever
   the same thing happens. */
.quantity:has(input.qty[type="hidden"]){display:none}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* flex:1 with a floor of 220px is what pushed the favourite button onto a
   second row on a phone: 138px of quantity + 220px that refuses to shrink +
   a 52px heart does not fit in 406px, and the heart is the item that wraps.
   The buy button is the flexible one in this row, so it is the one that
   gives — the floor only applies where there is room for it. */
.single-product button.single_add_to_cart_button{flex:1 1 auto;min-width:220px;
background:var(--pc-magenta);color:var(--pc-white);border:0;border-radius:var(--pc-radius);
padding:15px 28px;font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em;cursor:pointer;
transition:background-color .15s}
.single-product button.single_add_to_cart_button:hover{background:var(--pc-magenta-hover)}
.single-product button.single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}

/* On a phone all three have to share one row: the quantity control gets
   tighter, and the buy button drops its floor so it absorbs what is left
   instead of forcing the heart to wrap. */
@media (max-width:768px){
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart{flex-wrap:nowrap;gap:8px}
.single-product button.single_add_to_cart_button{min-width:0;padding:15px 12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quantity .pc-qty__btn{width:34px}
.quantity input.qty{width:40px}
.pc-fav--single{width:48px}
}

/* Variation swatches — WooCommerce renders a <select>; we make it look like
   the buttons on the old site while keeping the native control underneath. */
.variations{width:100%;margin:0 0 16px;border-collapse:collapse}
.variations tr{display:block;margin-bottom:14px}
.variations th,.variations td{display:block;padding:0;text-align:left}
.variations th.label{font-size:14px;font-weight:600;margin-bottom:8px}
.variations select{width:100%;height:48px;padding:0 38px 0 14px;font-size:15px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);background:var(--pc-white);
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23111' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
.reset_variations{display:inline-block;margin-top:8px;font-size:13px;
color:var(--pc-text-2);text-decoration:underline}
.woocommerce-variation-price{margin-bottom:12px}

/* Cart progress — one bar, next unmet milestone only.
   Appears on the product page and inside the cart's order summary. */
.pc-progress{display:flex;gap:12px;align-items:center;margin:18px 0;padding:13px 15px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);background:var(--pc-white)}
.pc-progress__img img{width:46px;height:46px;object-fit:contain;background:var(--pc-bg);
border-radius:4px}
.pc-progress__body{flex:1;min-width:0}
.pc-progress__text{margin:0 0 8px;font-size:14px;line-height:1.4}
.pc-progress__text strong{font-weight:600;color:var(--pc-magenta)}
.pc-progress__bar{height:5px;border-radius:3px;background:var(--pc-line);overflow:hidden}
.pc-progress__bar span{display:block;height:100%;border-radius:3px;
background:var(--pc-magenta);transition:width .35s ease}
.pc-progress.is-shipping .pc-progress__bar span{background:var(--pc-success)}
.pc-progress.is-shipping .pc-progress__text strong{color:var(--pc-success)}

.pc-progress.is-complete{gap:8px;padding:10px 14px;background:var(--pc-success-bg);
border-color:color-mix(in srgb, var(--pc-success) 30%, var(--pc-white));
color:var(--pc-success)}
/* The check sits inside the paragraph, and the global reset makes every svg
   a block — so the paragraph itself has to be the row, or the tick takes a
   line of its own above the text. */
.pc-progress.is-complete .pc-progress__text{display:flex;align-items:center;gap:8px;
margin:0;font-size:13px;font-weight:600}
.pc-progress.is-complete .pc-progress__text svg{flex:0 0 auto}
/* The cheer leads, the facts follow in the same green — bolder, not louder. */
.pc-progress.is-complete .pc-progress__text strong{font-weight:700;color:inherit}

/* In the cart's order summary it is part of the panel, not a card on it. */
.pc-progress--cart{margin:0 0 16px;background:transparent;border:0;padding:0}

/* Olfactory pyramid */
/* Same hairlines as the accordion below it.
 *
 * It used to be a bordered card with a filled header and a magenta pill, and
 * in the summary column that made the notes look like the most important
 * thing on the page — louder than the price, louder than the button. The
 * pyramid is reference material: a buyer either wants the notes or does not,
 * and the ones who do will read them at any weight. Boxed off it also read as
 * a separate widget; on rules it continues the same list the accordion picks
 * up, which is what it actually is.
 *
 * The family keeps the accent colour but loses the pill. It is one word about
 * the product, not a badge to be awarded. */
/* The notes, inside the first accordion section.
 *
 * No rules of its own: the section it lives in already has one above and one
 * below. What separates the three notes is space and the weight difference
 * between a muted label and a black value — the same job a divider would do,
 * without adding a line to a column that has enough of them. */
.pc-olfactive{margin:0}
.pc-olfactive__row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
padding:5px 0}
.pc-olfactive__row dt{margin:0;font-size:13px;color:var(--pc-text-2)}
.pc-olfactive__row dd{margin:0;font-size:14px;font-weight:500;color:var(--pc-ink)}
@media (max-width:560px){
.pc-olfactive__row{grid-template-columns:1fr;gap:0;padding:7px 0}
}

/* Tabs */
/* Accordion (replaces WooCommerce's tabs — see pc_product_accordion). */
/* The whole accordion is the reading column, not just its contents. Putting
   the width here rather than on the head and the body means the rules
   between sections stop where the grey rows stop — before, the separators
   ran the full container while the bars they were separating were 820px,
   so the lines looked unrelated to the thing they belonged to. */
/* Hairlines, not filled bars.
 *
 * The grey row and the 820px centred column were written for a block that
 * ran the full width of the page under the gallery. In the summary column it
 * is one element among several — price, buy, delivery — and three grey slabs
 * outweighed all of them. Rules between the rows mark where each section
 * begins at a fraction of the visual cost, and the type drops to sit under
 * the product title rather than compete with it. */
.pc-accordion{margin-top:22px;border-top:1px solid var(--pc-line)}
.pc-accordion__item{border-bottom:1px solid var(--pc-line)}
/* Baseline, not centre.
 *
 * The heading is 15px and the family beside it is 11px, and centring boxes of
 * two different sizes lines up their middles — which for text reads as the
 * small one sitting low, because letters do not fill their line box evenly.
 * Sharing a baseline is what makes two sizes of type look level. The chevron
 * is not type and re-centres itself. */
.pc-accordion__head{display:flex;align-items:baseline;justify-content:space-between;
gap:12px;padding:13px 2px;cursor:pointer;list-style:none;
font-family:var(--pc-font-head);font-size:15px;font-weight:500;color:var(--pc-ink)}
.pc-accordion__head svg{align-self:center}
.pc-accordion__head::-webkit-details-marker{display:none}
.pc-accordion__head:hover{color:var(--pc-magenta)}
/* The family name, riding along in the heading so it reads while closed.
   margin-right:auto keeps it beside the title instead of out by the chevron,
   where it would look like a second control. */
.pc-accordion__meta{margin-right:auto;font-size:11px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:var(--pc-magenta)}
.pc-accordion__head:hover .pc-accordion__meta{color:inherit}
.pc-accordion__head svg{flex:0 0 auto;width:16px;height:16px;color:var(--pc-muted);
transform:rotate(90deg);transition:transform .2s ease}
.pc-accordion__item[open]>.pc-accordion__head svg{transform:rotate(-90deg);
color:var(--pc-text-2)}
.pc-accordion__body{padding:2px 2px 20px;font-size:15px;line-height:1.65;
color:var(--pc-text-2)}
.pc-accordion__body>h2:first-child{position:absolute;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.pc-accordion__head svg{transition:none}}

.woocommerce-tabs{margin-top:16px}
.woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;padding:0;
border-bottom:1px solid var(--pc-line);list-style:none}
.woocommerce-tabs ul.tabs li a{display:block;padding:13px 20px;
font-family:var(--pc-font-head);font-size:14px;font-weight:500;letter-spacing:.02em;
color:var(--pc-text-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{
color:var(--pc-ink);border-bottom-color:var(--pc-magenta)}
.woocommerce-Tabs-panel{max-width:820px;font-size:16px;line-height:1.7}
.woocommerce-Tabs-panel h2{font-size:22px;margin:0 0 16px}
.woocommerce-Tabs-panel h2:first-child{position:absolute;width:1px;height:1px;
overflow:hidden;clip:rect(0 0 0 0)}

/* Reviews — the list itself is styled in section 6; these are the tab-panel
   form leftovers that have to stay next to the panel rules. */
.woocommerce-Reviews .comment-form textarea,
.woocommerce-Reviews .comment-form input[type=text],
.woocommerce-Reviews .comment-form input[type=email]{width:100%;padding:11px 13px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);font-size:15px}
.woocommerce-Reviews .comment-form-rating .stars a{color:var(--pc-star)}

/* Related */
.related.products,.up-sells.products{margin-top:24px}
/* Six cards, and a column count that divides into six at every width: 6, 3,
   2. The shop grid steps 5 → 4 → 3 → 2, which would have left one card alone
   on the last row at two of those widths. */
.related ul.products,.up-sells ul.products{--pc-cols:6}
@media (max-width:1400px){.related ul.products,.up-sells ul.products{--pc-cols:3}}
@media (max-width:768px){.related ul.products,.up-sells ul.products{--pc-cols:2;gap:12px}}
.related.products>h2,.up-sells.products>h2{margin:0 0 24px;text-align:center;
font-size:clamp(20px,2.2vw,22px)}

@media (max-width:900px){
.pc-product__top{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   3. Cart, checkout, account
   ========================================================================== */

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table{width:100%;border-collapse:collapse;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);font-size:15px;
background:var(--pc-white);margin-bottom:24px}
.woocommerce table.shop_table th{background:var(--pc-bg);padding:14px 16px;
text-align:left;font-size:13px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;border-bottom:1px solid var(--pc-line)}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--pc-line);
vertical-align:middle}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.cart img{width:70px;border-radius:4px}
.woocommerce a.remove{display:grid;place-items:center;width:24px;height:24px;
border-radius:50%;color:var(--pc-error);font-size:18px;line-height:1;text-decoration:none}
.woocommerce a.remove:hover{background:var(--pc-error);color:var(--pc-white)}

/* WooCommerce drops the totals and the cross-sells into the same container,
   in that order. Left as-is that gives a totals box stretched to 1150px —
   four short rows across a very wide table — beside product cards squeezed
   into 380px, which is where the card grid was collapsing to five 63px
   columns. So the two are placed explicitly: products take the wide column,
   the totals box the narrow one on the right, where a buyer expects it.
   The order stays as it is in the DOM, so on a phone the totals and the
   checkout button come first and the suggestions after. */
.woocommerce .cart-collaterals{display:grid;grid-template-columns:minmax(0,1fr) 420px;
gap:32px 40px;align-items:start}
.woocommerce .cart-collaterals > .cart_totals{grid-column:2;grid-row:1}
.woocommerce .cart-collaterals > .pc-crosssells{grid-column:1;grid-row:1;margin-top:0}
.cart_totals{border:1px solid var(--pc-line);border-radius:var(--pc-radius);padding:22px;
background:var(--pc-white)}
.cart_totals h2{font-size:20px;margin:0 0 16px;font-weight:500}

/* The label column takes whatever it wants by default, which on a 420px
   box leaves the shipping choices four words wide. Capped, so the values
   and the delivery options get the room. */
.cart_totals table.shop_table th{width:40%;padding:14px 12px 14px 0;vertical-align:top}
.cart_totals table.shop_table td{padding:14px 0}

/* The shipping methods came out as bare radio buttons with the label text
   wrapping underneath them. */
.cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:8px}
.cart_totals ul#shipping_method li{margin:0;padding:0;display:flex;
align-items:flex-start;gap:8px}
.cart_totals ul#shipping_method li input[type=radio]{margin:3px 0 0;flex:0 0 auto;
accent-color:var(--pc-magenta)}
.cart_totals ul#shipping_method li label{margin:0;line-height:1.45;cursor:pointer}
.cart_totals .woocommerce-shipping-destination{margin:10px 0 0;font-size:13px;
color:var(--pc-muted)}
.cart_totals .shipping-calculator-button{font-size:13px}
.wc-proceed-to-checkout .checkout-button{display:block;width:100%;text-align:center;
background:var(--pc-magenta);color:var(--pc-white);padding:15px;border-radius:var(--pc-radius);font-family:var(--pc-font-head);
font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em}
.wc-proceed-to-checkout .checkout-button:hover{background:var(--pc-magenta-hover)}
@media (max-width:900px){
.woocommerce .cart-collaterals{grid-template-columns:minmax(0,1fr)}
.woocommerce .cart-collaterals > .cart_totals,
.woocommerce .cart-collaterals > .pc-crosssells{grid-column:1;grid-row:auto}
.woocommerce .cart-collaterals > .pc-crosssells{margin-top:8px}
}

/* The global reset strips every button down to bare text (critical.css:50),
   which is right for the icon buttons the theme draws itself and wrong for
   the ones WooCommerce emits with nothing but `.button` on them — "Aplică
   cuponul" and "Actualizează coșul" were rendering as two lines of plain
   text under the cart table. This is the secondary button the theme would
   have used, matching .pc-btn--ghost, and it also picks up the buttons on
   the account and order pages that had the same problem.

   Both :where() groups keep the whole thing at the specificity of
   `.woocommerce` alone, so every button that already has a treatment of its
   own — the magenta checkout button, the ones inside notices — keeps winning
   without being listed here. The .pc-btn exclusion is not optional: the card
   buttons carry `pc-btn pc-btn--primary ... button add_to_cart_button` all at
   once, and .pc-btn--primary is a single class, so without it this rule turns
   every add-to-cart button in the shop from magenta to outline. */
.woocommerce :where(.button,button.button,input.button,a.button):where(:not(.pc-btn)){
display:inline-flex;align-items:center;justify-content:center;
gap:8px;padding:13px 24px;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;white-space:nowrap;
border:1.5px solid var(--pc-ink);background:transparent;color:var(--pc-ink);
text-decoration:none;cursor:pointer;
transition:background-color .15s,color .15s,border-color .15s}
.woocommerce :where(.button,button.button,input.button,a.button):where(:not(.pc-btn)):hover{
background:var(--pc-ink);color:var(--pc-white)}
.woocommerce :where(.button:disabled,.button[disabled],.button.disabled):where(:not(.pc-btn)){
opacity:.45;pointer-events:none}

/* Coupon on the left, "update basket" pushed to the far right — the same
   split the row has on every shop that styles it at all.

   The cell itself keeps `display:table-cell`. Giving it `display:flex`
   looks like the obvious way to lay the row out, but a flex box inside a
   table row is wrapped in an anonymous single-column cell, so the row loses
   its colspan and the first column of the whole cart table stretches to
   fit it. The flexing happens on .coupon, which is an ordinary div. */
.woocommerce td.actions{padding:18px}
.woocommerce td.actions::after{content:"";display:block;clear:both}
.woocommerce td.actions .coupon{display:inline-flex;align-items:center;gap:10px;
max-width:100%;vertical-align:middle}
.woocommerce td.actions .coupon .input-text{flex:1 1 auto;min-width:0;width:240px;
min-height:46px;padding:11px 13px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);font-size:15px;background:var(--pc-white)}
.woocommerce td.actions .coupon .input-text:focus{outline:0;border-color:var(--pc-magenta)}
.woocommerce td.actions > button[name="update_cart"],
.woocommerce td.actions > .button{float:right}
@media (max-width:640px){
.woocommerce td.actions .coupon{display:flex;flex-wrap:wrap;width:100%}
.woocommerce td.actions .coupon .input-text{width:auto;flex:1 1 150px}
.woocommerce td.actions > button[name="update_cart"],
.woocommerce td.actions > .button{float:none;width:100%;margin-top:12px}
}

/* Item meta under a product name. The gift line from Woo Discount Rules has
   no key — pc_gift_item_label() empties it — but WooCommerce's template
   prints the colon regardless, so the row was reading as a stray ":" above
   an indented "🎁 CADOU". The empty <dt> goes, and the value becomes the
   badge it was always meant to be. */
.woocommerce dl.variation{display:flex;flex-wrap:wrap;align-items:baseline;
gap:4px 8px;margin:6px 0 0;font-size:13px;color:var(--pc-muted)}
.woocommerce dl.variation dt{margin:0;font-weight:500}
.woocommerce dl.variation dd{margin:0}
.woocommerce dl.variation dd p{margin:0}
.woocommerce dl.variation dt.variation-{display:none}
.woocommerce dl.variation dt.variation- + dd{display:inline-flex;align-items:center;
padding:3px 10px;border-radius:999px;background:var(--pc-success-bg);
color:var(--pc-success);font-size:12px;font-weight:500}

.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.woocommerce form .form-row label{font-size:14px;font-weight:500}
.woocommerce form .form-row .required{color:var(--pc-error);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);font-size:15px;background:var(--pc-white)}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{outline:0;border-color:var(--pc-magenta)}
.woocommerce .select2-container--default .select2-selection--single
.select2-selection__rendered{line-height:24px;padding-left:0}

#customer_details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
#order_review_heading{margin-top:32px}
.woocommerce-checkout #payment{background:var(--pc-bg);border-radius:var(--pc-radius);
padding:20px}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 16px}
.woocommerce-checkout #payment ul.payment_methods li{padding:10px 0;
border-bottom:1px solid var(--pc-line)}
.woocommerce-checkout #payment div.payment_box{background:var(--pc-white);padding:12px 14px;
border-radius:4px;font-size:14px;margin-top:10px}
.woocommerce #place_order{width:100%;background:var(--pc-magenta);color:var(--pc-white);border:0;
padding:16px;border-radius:var(--pc-radius);font-family:var(--pc-font-head);
font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
cursor:pointer}
.woocommerce #place_order:hover{background:var(--pc-magenta-hover)}
@media (max-width:768px){#customer_details{grid-template-columns:1fr}}

.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 24px;
display:flex;flex-wrap:wrap;gap:6px}
.woocommerce-MyAccount-navigation a{display:block;padding:10px 16px;font-size:14px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);background:var(--pc-white)}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover{background:var(--pc-ink);color:var(--pc-white);
border-color:var(--pc-ink)}

/* ==========================================================================
   4. Notices — moved to theme.css
   ==========================================================================

   A notice can be raised anywhere: a coupon message on the blog, a login
   error on a static page. shop.css only loads on shop pages, the cart, the
   front page and favorites, so styling them here left the rest of the site
   showing WooCommerce's raw markup. They live in theme.css now. */

/* ==========================================================================
   5. Cart & Checkout blocks
   
   WooCommerce 8+ ships block-based Cart and Checkout, which render through
   page.php rather than woocommerce.php. They bring their own layout CSS;
   what follows only re-skins the controls to the brand. Both the block and
   the classic shortcode markup are covered, because an existing shop may
   still be on the shortcodes.
   ========================================================================== */

.pc-page__body--wide{max-width:none}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{max-width:none}

/* The short description belongs on the product page. In the cart the buyer
   has already decided; repeating it per line pushes the totals and the
   checkout button below the fold, which on mobile is where they are lost.
   The same rule applies to the checkout summary — see checkout.css. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description{display:none}

/* Woo Discount Rules signs its free line twice.
   Once through `woocommerce_get_item_data`, which inc/store-rules.php turns
   into 🎁 CADOU, and once in the cart item's variation data, which renders
   underneath it as "Wdr_free_product: Free" — the same fact, in the plugin's
   own handwriting.

   Hidden rather than removed. That variation data is how the plugin knows its
   own line, and WooCommerce copies it onto the order item, where this theme
   reads it back to tell a gift from a sale; taking it out of the cart would
   take all of that with it. Hidden rather than filtered out of the response,
   too: the cart block is drawn first from data hydrated straight out of the
   schema, without going through the REST dispatcher, so a filter there fixes
   every later request and not the page the shopper actually lands on.

   The class is WooCommerce's own, built from the attribute label — so if the
   plugin ever renames the key, this stops matching and the line comes back
   visible. Which is the right way round for it to fail. */
.wc-block-components-product-details__wdr-free-product{display:none}

/* Buttons */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
background:var(--pc-magenta);color:var(--pc-white);border:0;border-radius:var(--pc-radius);
padding:15px 28px;font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em;line-height:1.2;min-height:52px}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:var(--pc-magenta-hover)}
.wc-block-components-button__text{color:inherit}
.wc-block-components-button.is-link{color:var(--pc-magenta)}

/* Inputs */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-textarea,
.wc-blocks-components-select__select{
border:1px solid var(--pc-line)!important;border-radius:var(--pc-radius)!important;
font-family:var(--pc-font-body);font-size:15px;background:var(--pc-white)}
.wc-block-components-text-input.is-active input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus{
border-color:var(--pc-magenta)!important;outline:0;box-shadow:0 0 0 1px var(--pc-magenta)}

/* Headings inside the blocks use the body font — these are UI, not editorial */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-cart h2{font-family:var(--pc-font-body);font-weight:600;
letter-spacing:-.01em}

/* Totals + panels */
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
color:var(--pc-ink);font-weight:700}
.wc-block-components-sidebar,
.wc-block-components-order-summary{background:var(--pc-bg);border-radius:var(--pc-radius)}
.wc-block-components-product-price__value.is-discounted{color:var(--pc-magenta);font-weight:700}
.wc-block-components-product-price del{color:var(--pc-muted)}
.wc-block-components-sale-badge{background:var(--pc-success-bg);color:var(--pc-success);
border-radius:4px;font-weight:600}

/* Notices */
.wc-block-components-notice-banner{border-radius:var(--pc-radius);
font-family:var(--pc-font-body)}

/* ==========================================================================
   6. Reviews

   WooCommerce draws the rating picker as five links whose text reads
   "1 of 5 stars"…"5 of 5 stars", hidden by its own stylesheet with a
   text-indent. That stylesheet is not loaded here, so the labels have to be
   hidden deliberately — font-size:0 on the link, with the glyph sized on
   the pseudo-element.
   ========================================================================== */

.woocommerce-Reviews{max-width:820px}
.woocommerce-Reviews .comment-reply-title{display:block;margin:0 0 18px;
font-family:var(--pc-font-head);font-size:20px;font-weight:500;letter-spacing:.02em}
.woocommerce-Reviews #review_form_wrapper{margin-top:32px;padding-top:28px;
border-top:1px solid var(--pc-line)}

.woocommerce-Reviews .comment-form>p{margin:0 0 18px}
.woocommerce-Reviews .comment-form label{display:block;margin-bottom:7px;
font-size:14px;font-weight:500}
.woocommerce-Reviews .comment-form .required{color:var(--pc-error);text-decoration:none}
.woocommerce-Reviews .comment-form input[type=text],
.woocommerce-Reviews .comment-form input[type=email],
.woocommerce-Reviews .comment-form input[type=url],
.woocommerce-Reviews .comment-form textarea{width:100%;padding:12px 14px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
font-family:var(--pc-font-body);font-size:15px;background:var(--pc-white)}
.woocommerce-Reviews .comment-form textarea{min-height:150px;resize:vertical}
.woocommerce-Reviews .comment-form input:focus,
.woocommerce-Reviews .comment-form textarea:focus{outline:0;border-color:var(--pc-magenta)}
.woocommerce-Reviews .comment-form-cookies-consent{display:flex;gap:9px;
align-items:flex-start;font-size:14px;color:var(--pc-text-2)}
.woocommerce-Reviews .comment-form-cookies-consent input{width:auto;margin-top:4px}
.woocommerce-Reviews .comment-form-cookies-consent label{margin:0;font-weight:400}
.woocommerce-Reviews .comment-notes{font-size:14px;color:var(--pc-text-2)}

.woocommerce-Reviews .form-submit input[type=submit],
.woocommerce-Reviews #submit{padding:14px 32px;border:0;border-radius:var(--pc-radius);
background:var(--pc-magenta);color:var(--pc-white);cursor:pointer;
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em}
.woocommerce-Reviews .form-submit input[type=submit]:hover,
.woocommerce-Reviews #submit:hover{background:var(--pc-magenta-hover)}

/* Rating picker */
.comment-form-rating label{margin-bottom:8px}
/* The <select> is left alone on purpose: WooCommerce's own script hides it
   after building the stars, so without JavaScript it stays as a working
   fallback instead of a control nobody can reach. */
.comment-form-rating select{max-width:220px;height:44px;padding:0 12px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);background:var(--pc-white);
font-size:15px}
/* WooCommerce nests the five links inside a <span>, so that is the row. */
.comment-form-rating p.stars{margin:0;line-height:1}
.comment-form-rating p.stars span{display:flex;gap:2px}
/* Sizes are in px, not em: the link's own font-size is used to hide its
   label ("1 of 5 stars"), and em units would collapse to zero with it. */
.comment-form-rating p.stars a{position:relative;display:block;width:30px;height:30px;
overflow:hidden;text-indent:-999em;text-decoration:none;color:var(--pc-line);
transition:color .12s}
.comment-form-rating p.stars a::before{content:"\2605";position:absolute;left:0;top:0;
width:30px;height:30px;text-indent:0;text-align:center;line-height:30px;font-size:26px;
font-family:"Segoe UI Symbol","Apple Symbols","Arial Unicode MS",sans-serif;color:inherit}
.comment-form-rating p.stars a:hover,
.comment-form-rating p.stars:hover a{color:var(--pc-star)}
.comment-form-rating p.stars a:hover ~ a{color:var(--pc-line)}
.comment-form-rating p.stars.selected a:not(.active){color:var(--pc-star)}
.comment-form-rating p.stars.selected a.active{color:var(--pc-star)}
.comment-form-rating p.stars.selected a.active ~ a{color:var(--pc-line)}

/* Existing reviews — a list separated by hairlines, not a stack of filled
   cards. Boxes around every entry make five reviews look like five adverts;
   the rule between them is enough to say where one ends. */
.woocommerce-Reviews .commentlist{list-style:none;padding:0;margin:0}
.woocommerce-Reviews .review{padding:20px 0;border-bottom:1px solid var(--pc-line)}
/* WooCommerce puts a .comment_container between the <li> and its contents,
   so that is the row — putting the flex on .review leaves the avatar and the
   text stacked inside a single flex child. */
.woocommerce-Reviews .review .comment_container{display:flex;gap:14px}
.woocommerce-Reviews .review:first-child{padding-top:4px}
.woocommerce-Reviews .review:last-child{border-bottom:0;padding-bottom:4px}

/* The initial, from inc/reviews.php. Quiet on purpose: a column of solid
   magenta discs down the page would outshout the reviews themselves. */
.pc-review__avatar{flex:0 0 34px;width:34px;height:34px;display:grid;
place-items:center;border-radius:50%;background:var(--pc-bg);
box-shadow:inset 0 0 0 1px var(--pc-line);
font-family:var(--pc-font-head);font-size:14px;font-weight:600;
line-height:1;color:var(--pc-ink)}

.woocommerce-Reviews .review .comment-text{flex:1;min-width:0}
/* Same correction as the product-page rating: the ★ glyph inks ~54% of its
   em against ~74% for text, so 13px here looked half the size of the name
   under it. 17px puts the stars level with the meta row. */
.woocommerce-Reviews .review .star-rating{font-size:17px;margin-bottom:5px}

/* A flex row of independent pieces, so a long name wraps without dragging
   the date onto a line of its own. These class names are WooCommerce's, and
   the Customer Reviews plugin emits the same ones — styling them rather than
   replacing the markup is what keeps one meta line on screen either way. */
.woocommerce-Reviews .review .meta{display:flex;align-items:center;flex-wrap:wrap;
gap:6px 9px;margin:0 0 7px;font-size:13px;line-height:1.3}
.woocommerce-review__author{font-size:14px;font-weight:600;color:var(--pc-ink)}
/* Not a pill: the brackets around it come from WooCommerce's markup, and a
   filled badge inside a parenthesis reads as a mistake. Colour alone carries
   it, which is the quieter answer anyway. */
.woocommerce-review__verified{font-style:normal;font-size:12px;font-weight:500;
color:var(--pc-success)}
/* The gap does the separating. */
.woocommerce-review__dash{display:none}
.woocommerce-review__published-date{color:var(--pc-muted)}
/* A footnote under the review: smaller than the text it follows, and muted,
   so a page full of pooled reviews does not turn into a page full of labels. */
.pc-review__variant{margin:6px 0 0;font-size:12px;color:var(--pc-muted)}

.woocommerce-Reviews .review .description{font-size:15px;line-height:1.65}
.woocommerce-Reviews .review .description p{margin:0 0 8px}
.woocommerce-Reviews .review .description p:last-child{margin-bottom:0}

.woocommerce-noreviews{margin:0 0 8px;color:var(--pc-text-2)}

/* Cross-sells use the theme's own card, so they need only a wrapper.

   The column count follows the shop grid rather than the number of
   suggestions. Two products in two columns of a 1600px container gave 720px
   cards with 700px photographs — a suggestion the size of a hero. Two of five
   tracks leaves space to the right, which is what a short row should look
   like. */
.pc-crosssells{margin:28px 0 0}
.pc-crosssells__title{margin:0 0 18px;font-size:clamp(19px,2vw,22px)}

/* PHP already knows how many products it rendered and says so in the
   modifier class, so the count comes from there rather than from a fixed
   number that was wrong whenever the container was not full width. The
   320px cap keeps one or two suggestions from ballooning into billboards;
   `start` then holds them to the left instead of stranding them mid-row. */
.pc-crosssells .pc-grid{grid-template-columns:repeat(var(--pc-cols,4),minmax(0,320px));
justify-content:start}
.pc-crosssells .pc-grid--1{--pc-cols:1}
.pc-crosssells .pc-grid--2{--pc-cols:2}
.pc-crosssells .pc-grid--3{--pc-cols:3}
.pc-crosssells .pc-grid--4{--pc-cols:4}
.pc-crosssells .pc-grid--5{--pc-cols:5}
@media (max-width:1024px){.pc-crosssells .pc-grid{--pc-cols:3}}
@media (max-width:768px){.pc-crosssells .pc-grid{--pc-cols:2;gap:12px;
grid-template-columns:repeat(var(--pc-cols),minmax(0,1fr))}}

/* ==========================================================================
   7. Conversion helpers on the product page
   ========================================================================== */

/* Now below the button, in the same quiet register as the free-delivery
   line it sits next to — a boxed card there would shout over the button. */
.pc-delivery{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:0;
border:0;font-size:13px;line-height:1.45;color:var(--pc-text-2)}
.pc-delivery svg{color:var(--pc-success);flex:0 0 auto}
.pc-delivery strong{color:var(--pc-ink);font-weight:600}

.pc-lowstock{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;
padding:7px 13px;border-radius:var(--pc-radius);
background:color-mix(in srgb, var(--pc-warning) 12%, var(--pc-white));
color:var(--pc-warning);font-size:14px;font-weight:600}
.pc-lowstock::before{content:"";width:7px;height:7px;border-radius:50%;
background:currentColor}

/* Out of stock: an exit that is not the back button. */
/* This is the only good news on an out-of-stock page: the perfume is still
   buyable, just in another size. In plain grey it sat next to the
   back-in-stock form in the same plain grey, and the box that can take an
   order today looked exactly like the box that asks you to wait. The tint
   and the rail put it first without shouting. */
.pc-oos{margin:0 0 16px;padding:18px;border-radius:var(--pc-radius);
background:color-mix(in srgb, var(--pc-magenta) 6%, var(--pc-white));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc-magenta) 18%, transparent)}
.pc-oos__text{margin:0 0 12px;font-size:15px;font-weight:500;color:var(--pc-ink)}
.pc-oos__options{display:flex;flex-wrap:wrap;gap:8px}
/* The alternative is the action here, so it looks like one. */
.pc-oos__options .pc-btn{padding:12px 22px;background:var(--pc-magenta);
color:var(--pc-white);border-color:var(--pc-magenta)}
.pc-oos__options .pc-btn:hover{background:var(--pc-magenta-hover);
border-color:var(--pc-magenta-hover);color:var(--pc-white)}

/* Sticky add to cart — mobile only. */
.pc-sticky-atc{display:none}
@media (max-width:900px){
.pc-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:55;
display:flex;align-items:center;gap:12px;
padding:8px 12px calc(8px + env(safe-area-inset-bottom));
background:var(--pc-white);border-top:1px solid var(--pc-line);
/* The border already draws the edge; the shadow only has to lift the bar
   off what scrolls under it. Both at full strength read as a heavy slab. */
box-shadow:0 -4px 16px rgba(0,0,0,.05);
transform:translateY(110%);transition:transform .22s ease}
.pc-sticky-atc.is-visible{transform:none}
.pc-sticky-atc[hidden]{display:flex}

.pc-sticky-atc__info{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.pc-sticky-atc__info img{width:38px;height:38px;object-fit:contain;
background:var(--pc-bg);border-radius:4px;flex:0 0 38px}
.pc-sticky-atc__info>div{min-width:0} /* or the name never gets to ellipsis */

.pc-sticky-atc__name{margin:0;font-size:13px;line-height:1.3;color:var(--pc-ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-sticky-atc__price{margin:1px 0 0;font-size:14px;font-weight:700;line-height:1.2}
.pc-sticky-atc__price del{display:none} /* no room for two numbers here */
.pc-sticky-atc__price .pc-price__rrp{display:none}
.pc-sticky-atc__price .pc-price__now{color:var(--pc-magenta)}
.pc-sticky-atc__price ins{text-decoration:none}
.pc-sticky-atc__price,
.pc-sticky-atc__price *{color:var(--pc-magenta)}

/* The button is the reason the bar exists, so it is the widest thing that
   still leaves the name room to be read — capped rather than free to grow,
   because a full-width button beside a squeezed name inverts that. */
.pc-sticky-atc__btn{flex:0 1 auto;min-width:132px;max-width:46%;height:46px;
padding:0 18px;border:0;cursor:pointer;
border-radius:var(--pc-radius);background:var(--pc-magenta);color:var(--pc-white);
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.12em;line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:background-color .15s}
.pc-sticky-atc__btn:hover,
.pc-sticky-atc__btn:active{background:var(--pc-magenta-hover)}
/* The bar must never cover the last thing on the page, or the button that
   scrolls back to the top. */
body.single-product .pc-footer{padding-bottom:70px}
body.single-product .pc-totop{bottom:78px}
/* The WhatsApp bubble would land on the bar too — see theme.css, where the
   rest of the bottom furniture is kept out of each other's way. */
}

/* ==========================================================================
   Commercial plugins

   The theme drops WooCommerce's stylesheets, and these plugins hang their
   own markup off WooCommerce's hooks — so without this section they render
   as unstyled browser defaults in the middle of a styled page. Nothing here
   changes what the plugins do; it only dresses what they output.
   ========================================================================== */

/* Newsletter — the theme's own, not MailerLite's embed.
   A tinted band rather than another white card, so it reads as a pause
   between two walls of products instead of a third wall. */
.pc-newsletter{margin:48px auto}
.pc-newsletter__inner{display:grid;grid-template-columns:1fr minmax(0,420px);
gap:28px;align-items:center;padding:32px 36px;border-radius:var(--pc-radius-lg);
background:color-mix(in srgb, var(--pc-magenta) 7%, var(--pc-white));
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc-magenta) 16%, transparent)}
.pc-newsletter__title{margin:0;font-family:var(--pc-font-head);
font-size:clamp(20px,2.4vw,27px);font-weight:600;line-height:1.2;color:var(--pc-ink)}
.pc-newsletter__text{margin:8px 0 0;max-width:52ch;font-size:15px;line-height:1.6;
color:var(--pc-text-2)}
.pc-newsletter__form{display:grid;grid-template-columns:1fr auto;gap:10px}
.pc-newsletter__input{height:52px;padding:0 16px;font:inherit;font-size:15px;
color:var(--pc-ink);background:var(--pc-white);border:1px solid var(--pc-line);
border-radius:var(--pc-radius);-webkit-appearance:none;appearance:none}
.pc-newsletter__input:focus{outline:0;border-color:var(--pc-magenta)}
.pc-newsletter__input::placeholder{color:var(--pc-muted)}
.pc-newsletter__submit{height:52px;white-space:nowrap}
.pc-newsletter__submit.loading{opacity:.6;pointer-events:none}
/* MailerLite draws its own form in here once it loads. The only thing the
   theme owes it is a place that lines up with the section around it. */
.pc-newsletter__embed{width:100%}
.pc-newsletter__embed[hidden],.pc-newsletter__form[hidden]{display:none}
/* Once their form is in, it brings its own title and text — so the theme's
   half of the section stands down and the embed takes the full width. */
.pc-newsletter.is-embedded .pc-newsletter__inner{grid-template-columns:minmax(0,1fr)}
.pc-newsletter.is-embedded .pc-newsletter__copy{display:none}
/* Spans both columns so the answer sits under the whole form, not under the
   button it came from. */
.pc-newsletter__note{grid-column:1/-1;margin:0;font-size:14px;line-height:1.5}
.pc-newsletter__note[hidden]{display:none}
.pc-newsletter__note.is-ok{color:var(--pc-success);font-weight:600}
.pc-newsletter__note.is-error{color:var(--pc-error)}
@media (max-width:900px){
.pc-newsletter__inner{grid-template-columns:1fr;gap:20px;padding:26px 22px}
}
@media (max-width:520px){
.pc-newsletter__form{grid-template-columns:1fr}
}

/* A row's own heading links to the collection it shows; the link should not
   announce itself twice by changing colour as well as being a heading. */
.pc-section__title a{color:inherit;text-decoration:none}
.pc-section__title a:hover{color:var(--pc-magenta)}
.pc-section__lede{margin:6px 0 0;max-width:70ch;font-size:14px;line-height:1.6;
color:var(--pc-text-2)}

/* The company fields are toggled by [hidden]; the block's own wrappers carry
   a display, which would otherwise win over the browser's [hidden] rule. */
.wc-block-components-text-input[hidden],
.wc-block-components-form-row[hidden],
.wc-block-components-checkbox[hidden]{display:none!important}

/* --- Back In Stock Notifications ---------------------------------------
   An out-of-stock product is where the sale is otherwise lost, so this form
   is the most valuable thing on the page. It gets the weight of a card and
   the same field/button pairing as the header search. */
#wc_bis_product_form,
#wc_bis_already_registered{margin:20px 0 28px;padding:18px 20px;
background:var(--pc-bg);border:1px solid var(--pc-line);border-radius:var(--pc-radius-lg)}
#wc_bis_product_form .wc_bis_form_title{margin:0 0 12px;
font-family:var(--pc-font-head);font-size:16px;font-weight:500;color:var(--pc-ink)}
#wc_bis_product_form #wc_bis_email{width:100%;height:48px;padding:0 14px;margin:0;
font:inherit;font-size:15px;color:var(--pc-ink);background:var(--pc-white);
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
-webkit-appearance:none;appearance:none}
#wc_bis_product_form #wc_bis_email:focus{outline:0;border-color:var(--pc-magenta)}
#wc_bis_product_form #wc_bis_email::placeholder{color:var(--pc-muted)}
/* display:block, not the button default: as an inline-block it sits on a
   text baseline and the descender gap swallows the next row's margin. */
#wc_bis_product_form .wc_bis_send_form{display:block;width:100%;margin-top:10px;float:none;
min-height:48px;padding:14px 24px;cursor:pointer;
background:var(--pc-magenta);color:var(--pc-white);border:0;
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}
#wc_bis_product_form .wc_bis_send_form:hover{background:var(--pc-magenta-hover)}
#wc_bis_product_form .wc_bis_opt_in{display:flex;align-items:flex-start;gap:8px;
margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--pc-text-2)}
#wc_bis_product_form .wc_bis_opt_in input[type=checkbox]{margin:2px 0 0;flex:0 0 auto}
#wc_bis_product_form .wc_bis_opt_in span{margin-left:0}
/* Social proof: how many people are already waiting for this one. */
#wc_bis_product_form .wc_bis_registrations_count{margin:12px 0 0;
font-size:13px;color:var(--pc-text-2)}
#wc_bis_product_form .woocommerce-error,
#wc_bis_product_form .woocommerce-message{margin:12px 0 0;padding:10px 12px;
font-size:13px;border-radius:var(--pc-radius)}
#wc_bis_product_form .woocommerce-error{color:var(--pc-error);
background:color-mix(in srgb, var(--pc-error) 8%, var(--pc-white))}
#wc_bis_product_form .woocommerce-message{color:var(--pc-success);
background:color-mix(in srgb, var(--pc-success) 8%, var(--pc-white))}

/* What stands where the form stood once the sign-up went through. Same card
   as the form so nothing jumps, but green rather than magenta: this is a
   receipt, not another thing to do. */
.pc-bis-done{margin:20px 0 28px;padding:18px 20px;border-radius:var(--pc-radius-lg);
background:color-mix(in srgb, var(--pc-success) 7%, var(--pc-white));
border:1px solid color-mix(in srgb, var(--pc-success) 25%, transparent)}
.pc-bis-done__title{display:flex;align-items:center;gap:8px;margin:0 0 6px;
font-family:var(--pc-font-head);font-size:16px;font-weight:500;
color:var(--pc-success)}
.pc-bis-done__title svg{flex:0 0 auto}
.pc-bis-done__text{margin:0;font-size:14px;line-height:1.55;color:var(--pc-text-2)}

/* The My Account tab the plugin adds, so it matches the other tabs. */
.woocommerce-backinstock-table{width:100%;border-collapse:collapse}
.woocommerce-backinstock-table th,
.woocommerce-backinstock-table td{padding:12px 10px;text-align:left;
border-bottom:1px solid var(--pc-line);font-size:14px}
.woocommerce-backinstock-table__cell__product .description{display:block;
margin-top:2px;font-size:12px;color:var(--pc-text-2)}

/* --- Woo Discount Rules -------------------------------------------------
   The bulk-pricing bar and table are a real conversion lever ("buy 3, save
   15%"), so they stay visible — but as part of the page, not as a plugin
   default. The badge colours stay under the plugin's own control: it sets
   them inline per rule, and overriding that would take the setting away. */
.awdr_discount_bar{padding:10px 14px;margin:0 0 10px;
border-radius:var(--pc-radius);font-size:14px;line-height:1.5}
.wdr_bulk_table,
table.wdr_dynamic_discount_table{width:100%;margin:18px 0;border-collapse:collapse;
font-size:14px}
.wdr_bulk_table th,
table.wdr_dynamic_discount_table th{padding:10px 12px;text-align:left;
background:var(--pc-bg);border:1px solid var(--pc-line);
font-family:var(--pc-font-head);font-size:12px;font-weight:500;
text-transform:uppercase;letter-spacing:.08em;color:var(--pc-text-2)}
.wdr_bulk_table td,
table.wdr_dynamic_discount_table td{padding:10px 12px;
border:1px solid var(--pc-line);color:var(--pc-ink)}
.wdr_dynamic_discount_table_heading{margin:18px 0 8px;
font-family:var(--pc-font-head);font-size:16px;font-weight:500}

/* --- Variation buttons --------------------------------------------------
   Same control as the family volume switch, so a variable product and a
   linked family offer the same gesture. The <select> only disappears once
   the script has confirmed the buttons work — without JavaScript the
   dropdown is still the way to choose. */
.pc-variation.is-ready select{position:absolute;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pc-variation__option{cursor:pointer;font:inherit;font-size:14px}
.pc-variation__option.is-unavailable{color:var(--pc-muted);border-style:dashed;
text-decoration:line-through;cursor:not-allowed}
.pc-variation__option.is-unavailable:hover{border-color:var(--pc-line)}

/* WooCommerce keeps this wrapper in the page whether or not it holds a
   chosen variation; empty, it was reserving a block of blank space between
   the options and the add-to-cart row. */
.single_variation_wrap .woocommerce-variation:empty{display:none}
.woocommerce-variation-availability:empty,
.woocommerce-variation-description:empty{display:none}
.variations_form .variations{margin-bottom:14px}
.variations_form .reset_variations{display:inline-block;margin-top:8px;
font-size:13px;color:var(--pc-text-2)}

/* ==========================================================================
   Account, sign in, registration
   ========================================================================== */

/* --- Account area -------------------------------------------------------
   Two shapes from one markup. Wide: a sidebar beside the content. Narrow:
   a settings screen — the dashboard lists every destination as a full-width
   row, an endpoint replaces that list with a way back. No horizontal scroll
   either way, because a row that scrolls sideways hides how much is in it. */
.woocommerce-account .woocommerce{display:grid;gap:28px;
grid-template-columns:260px minmax(0,1fr);align-items:start}

.pc-account__nav{background:var(--pc-bg);border:1px solid var(--pc-line);
border-radius:var(--pc-radius-lg);overflow:hidden}
.pc-account__who{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;
border-bottom:1px solid var(--pc-line)}
.pc-account__avatar{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
border-radius:50%;background:var(--pc-magenta);color:var(--pc-white);
font-family:var(--pc-font-head);font-size:17px;font-weight:600}
.pc-account__names{display:flex;flex-direction:column;min-width:0;gap:2px}
.pc-account__names strong{font-size:15px;font-weight:600;line-height:1.2}
.pc-account__names span{font-size:12px;color:var(--pc-text-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pc-account__menu{list-style:none;margin:0;padding:8px}
.pc-account__link{display:flex;align-items:center;gap:10px;padding:10px 12px;
border-radius:var(--pc-radius);font-size:14px;color:var(--pc-ink);text-decoration:none}
.pc-account__link>span{flex:1;min-width:0}
.pc-account__link .pc-icon{flex:0 0 auto;color:var(--pc-text-2)}
/* The chevron says "this goes somewhere" on the phone list; beside a sidebar
   entry it would be pointing at the panel already on screen. */
.pc-account__link .pc-icon--chevron{display:none}
.pc-account__link:hover{background:var(--pc-white);color:var(--pc-magenta)}
.pc-account__link:hover .pc-icon{color:var(--pc-magenta)}
.pc-account__link.is-current{background:var(--pc-ink);color:var(--pc-white);font-weight:500}
.pc-account__link.is-current .pc-icon{color:var(--pc-white)}

.pc-account__logout{display:flex;align-items:center;gap:10px;
padding:14px 20px;border-top:1px solid var(--pc-line);
font-size:14px;color:var(--pc-text-2);text-decoration:none}
.pc-account__logout:hover{color:var(--pc-error)}
.pc-account__logout .pc-icon{color:inherit}

.pc-account__back{display:none;align-items:center;gap:6px;
padding:12px 0;font-size:14px;font-weight:500;color:var(--pc-text-2);
text-decoration:none}
.pc-account__back .pc-icon{transform:rotate(180deg)}
.pc-account__back:hover{color:var(--pc-magenta)}

.woocommerce-MyAccount-content{min-width:0}

/* --- Dashboard ---------------------------------------------------------- */
.pc-dash{display:flex;flex-direction:column;gap:16px}
.pc-dash__order,.pc-dash__empty{padding:20px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius-lg)}
.pc-dash__order-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-bottom:10px}
.pc-dash__order-label{font-family:var(--pc-font-head);font-size:12px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:var(--pc-text-2)}
.pc-dash__order-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
margin:0 0 14px;font-size:14px;color:var(--pc-text-2)}
.pc-dash__order-meta strong{font-size:16px;color:var(--pc-ink)}
.pc-dash__empty{text-align:center}
.pc-dash__empty p{margin:0 0 14px;color:var(--pc-text-2)}
.pc-dash__all{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
font-size:14px;color:var(--pc-magenta);text-decoration:none}
.pc-dash__all:hover{text-decoration:underline;text-underline-offset:2px}

.pc-status{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
background:var(--pc-bg);color:var(--pc-text-2)}
.pc-status--completed{background:var(--pc-success-bg);color:var(--pc-success)}
.pc-status--processing,.pc-status--on-hold{background:var(--pc-warning-bg);color:var(--pc-warning)}
.pc-status--cancelled,.pc-status--failed,.pc-status--refunded{background:var(--pc-error-bg);color:var(--pc-error)}

/* --- Sign in / register ------------------------------------------------- */
.pc-auth{max-width:440px;margin:0 auto;padding:40px 0 64px}
.pc-auth__head{text-align:center;margin-bottom:26px}
.pc-auth__title{margin:0 0 6px;font-size:30px}
.pc-auth__sub{margin:0;color:var(--pc-text-2);font-size:15px}
.pc-auth__form{display:flex;flex-direction:column;gap:16px}

.pc-field{display:flex;flex-direction:column;gap:6px;margin:0}
.pc-field label{font-size:13px;font-weight:600;color:var(--pc-ink)}
.pc-field__hint{font-size:12px;color:var(--pc-text-2)}
.pc-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc-input{width:100%;height:48px;padding:0 14px;font:inherit;font-size:15px;
color:var(--pc-ink);background:var(--pc-white);border:1px solid var(--pc-line);
border-radius:var(--pc-radius);-webkit-appearance:none;appearance:none}
.pc-input:focus{outline:0;border-color:var(--pc-magenta)}

/* The reveal button sits inside the field, so the password box keeps the
   same width as every other input on the form. */
.pc-field__reveal{position:relative;display:block}
.pc-field__reveal .pc-input{padding-inline-end:46px}
.pc-reveal{position:absolute;inset-block:0;inset-inline-end:0;width:44px;
display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;
color:var(--pc-text-2)}
.pc-reveal:hover{color:var(--pc-ink)}

.pc-auth__row{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;font-size:14px}
.pc-check{display:inline-flex;align-items:center;gap:8px;color:var(--pc-text-2)}
.pc-auth__lost,.pc-auth__switch a{color:var(--pc-magenta);
text-decoration:underline;text-underline-offset:2px}
.pc-auth__legal{margin:0;font-size:13px;color:var(--pc-text-2)}
.pc-auth__legal a{color:var(--pc-magenta)}
.pc-auth__switch{margin:22px 0 0;text-align:center;font-size:14px;color:var(--pc-text-2)}
.pc-btn--block{width:100%;justify-content:center}

@media (max-width:900px){
	.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr);gap:18px}

	.pc-account__nav{background:none;border:0;border-radius:0}
	.pc-account__who{padding:0 0 16px}

	/* On the dashboard the destinations come after what the customer opened
	   the page to see, not in front of it. */
	.pc-account__nav.is-dashboard{order:2}
	.woocommerce-MyAccount-content{order:1}

	.pc-account__menu{padding:0;display:grid;gap:8px}
	.pc-account__link{padding:15px 16px;border:1px solid var(--pc-line);
		background:var(--pc-white)}
	.pc-account__link .pc-icon--chevron{display:block;color:var(--pc-faint)}
	.pc-account__link.is-current{background:var(--pc-white);color:var(--pc-ink);
		border-color:var(--pc-ink)}
	.pc-account__link.is-current .pc-icon{color:var(--pc-text-2)}
	.pc-account__logout{justify-content:center;margin-top:10px;
		border:1px solid var(--pc-line);border-radius:var(--pc-radius)}

	/* Inside an endpoint the whole list would just push the content down. */
	.pc-account__nav.is-endpoint .pc-account__menu,
	.pc-account__nav.is-endpoint .pc-account__logout,
	.pc-account__nav.is-endpoint .pc-account__who{display:none}
	.pc-account__nav.is-endpoint .pc-account__back{display:inline-flex}

	.pc-field-row{grid-template-columns:1fr}
	.pc-auth{padding:24px 0 48px}
	.pc-auth__title{font-size:25px}
	.pc-input{font-size:16px} /* 16px keeps iOS from zooming */
}
/* WooCommerce's registration privacy notice, on the theme's own form. */
.pc-auth__form .woocommerce-privacy-policy-text{margin:0;font-size:13px;
line-height:1.55;color:var(--pc-text-2)}
.pc-auth__form .woocommerce-privacy-policy-text p{margin:0}
.pc-auth__form .woocommerce-privacy-policy-text a{color:var(--pc-magenta)}

/* Assurances under the buy button: quiet, one line, three fragments. */
.pc-assurances{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;
margin:12px 0 0;padding:0}
.pc-assurances li{display:inline-flex;align-items:center;gap:6px;
font-size:12.5px;line-height:1.4;color:var(--pc-text-2)}
.pc-assurances svg{flex:0 0 auto;color:var(--pc-success)}

/* ==========================================================================
   Filters

   Desktop: a row of expandable groups above the grid. Phone: one button,
   because a listing that opens with four accordions has no room left for the
   products they filter.
   ========================================================================== */

.pc-filters{margin:0 0 20px}
.pc-filters__toggle{display:none}

/* align-items:flex-start is the whole fix for a bug that looked like a data
   problem: flex stretches items to the row's height by default, so opening
   one filter made the closed one beside it grow to match — a tall empty box
   with a heading, which reads as "this filter has no values". It had values.
   It was closed, and pretending to be open. */
.pc-filters__panel{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}

.pc-filter{flex:0 0 auto;align-self:flex-start;min-width:170px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);
background:var(--pc-white)}
.pc-filter[open]{border-color:var(--pc-line-strong,var(--pc-ink))}
.pc-filter__head{display:flex;align-items:center;gap:8px;padding:11px 14px;
cursor:pointer;list-style:none;font-family:var(--pc-font-head);font-size:14px;
font-weight:500;color:var(--pc-ink)}
.pc-filter__head::-webkit-details-marker{display:none}
.pc-filter__head>span:first-child{flex:1}
.pc-filter__head svg{color:var(--pc-text-2);transform:rotate(90deg);
transition:transform .18s ease}
.pc-filter[open] > .pc-filter__head svg{transform:rotate(-90deg)}
.pc-filter__count{display:grid;place-items:center;min-width:19px;height:19px;
padding:0 5px;border-radius:99px;background:var(--pc-magenta);color:var(--pc-white);
font-size:11px;font-weight:700}

.pc-filter__list{list-style:none;margin:0;padding:4px 6px 8px;max-height:260px;
overflow-y:auto}
.pc-filter__option{display:flex;align-items:center;gap:9px;padding:7px 8px;
border-radius:var(--pc-radius);font-size:14px;color:var(--pc-ink);text-decoration:none}
.pc-filter__option:hover{background:var(--pc-bg)}
.pc-filter__box{flex:0 0 auto;width:17px;height:17px;border:1.5px solid var(--pc-line-strong,#D9CCD3);
border-radius:4px;display:grid;place-content:center}
.pc-filter__option.is-on .pc-filter__box{background:var(--pc-ink);border-color:var(--pc-ink)}
.pc-filter__option.is-on .pc-filter__box::after{content:"";width:9px;height:5px;
border:2px solid var(--pc-white);border-top:0;border-right:0;
transform:rotate(-45deg) translate(1px,-1px)}
.pc-filter__name{flex:1;min-width:0}
.pc-filter__n{font-size:12px;color:var(--pc-text-2);font-variant-numeric:tabular-nums}
/* Kept visible rather than removed: a list that changes length as you tick
   things is disorienting, and "none of these exist" is itself an answer. */
.pc-filter__option.is-empty{color:var(--pc-muted)}
.pc-filter__option.is-empty .pc-filter__name{text-decoration:line-through}

.pc-filters__active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
margin-top:12px}
.pc-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
border-radius:99px;background:var(--pc-bg);border:1px solid var(--pc-line);
font-size:13px;color:var(--pc-ink);text-decoration:none}
.pc-chip:hover{border-color:var(--pc-ink)}
.pc-chip svg{color:var(--pc-text-2)}
.pc-filters__reset{font-size:13px;color:var(--pc-magenta);
text-decoration:underline;text-underline-offset:2px}

@media (max-width:900px){
	.pc-filters__toggle{display:inline-flex;align-items:center;gap:8px;
		min-height:44px;padding:0 16px;cursor:pointer;
		background:var(--pc-white);border:1px solid var(--pc-line);
		border-radius:var(--pc-radius);font-family:var(--pc-font-head);
		font-size:14px;font-weight:500;color:var(--pc-ink)}
	.pc-filters__toggle svg{color:var(--pc-text-2)}
	.pc-filters__badge{display:grid;place-items:center;min-width:20px;height:20px;
		padding:0 6px;border-radius:99px;background:var(--pc-magenta);
		color:var(--pc-white);font-size:11px;font-weight:700}

	/* Shown or not shown. An animated max-height needs a magic number big
	   enough for the longest attribute list, and a wrong guess clips the
	   options silently — the one failure a filter panel must not have. */
	.pc-filters__panel{display:none;flex-direction:column;margin-top:12px}
	.pc-filters__panel.is-open{display:flex}
	.pc-filter{min-width:0}
}


/* --- Cart totals column ---------------------------------------------------
   WooCommerce tints this column but gives it no padding, so anything the
   theme puts inside — the free-delivery bar — ends up flush against the
   tint's edge. Padding here, and the bar reads as part of the panel. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar{
padding:18px!important;border-radius:var(--pc-radius-lg)}
.wp-block-woocommerce-cart .wc-block-cart__sidebar .pc-progress{margin:0 0 14px}
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar{padding:0}

/* The block's own submit button already ends the column; the gap after it was
   a full screen before the suggestions began. */
.wp-block-woocommerce-cart .wc-block-cart__submit{margin-bottom:0}

/* --- Empty cart -----------------------------------------------------------
   WooCommerce's block leaves a crying-face icon, a dotted rule and a bare
   product grid — three different visual languages on the page a shopper hits
   when they have nothing yet, which is exactly when the shop should look
   like it knows what it is doing. */
.wp-block-woocommerce-empty-cart-block{padding:32px 0 8px;text-align:center}
.wc-block-cart__empty-cart__title{margin:0 0 6px;font-family:var(--pc-font-head);
font-size:clamp(22px,3vw,28px);font-weight:600;color:var(--pc-ink)}
/* The icon is a ::before on the heading and it is a crying face. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
opacity:.35;filter:grayscale(1)}
.wp-block-woocommerce-empty-cart-block .wp-block-separator{display:none}
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title){
margin:36px 0 18px;font-family:var(--pc-font-head);font-size:19px;font-weight:600;
text-align:left}

/* The theme's own card, in a WooCommerce product block — see
   inc/product-blocks.php. The column count is the shop owner's, set on the
   block in the editor; the card is the theme's. */
.pc-block-products{grid-template-columns:repeat(var(--pc-block-cols,4),minmax(0,1fr));
margin:0 0 8px}
/* The block writes --pc-block-cols inline, from the column count set in the
   editor — and an inline style beats every rule in this file, so overriding
   the variable here achieved nothing: four columns survived down to a phone,
   91px wide apiece. These set grid-template-columns itself, which the inline
   custom property has no say over. */
@media (max-width:1200px){.pc-block-products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.pc-block-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){.pc-block-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* The legacy block grid, kept for any block the theme does not take over. */
/* Every selector here is deliberately one step more specific than it needs
   to be. The block ships its own stylesheet with rules of the same weight,
   and the ones that lost silently were the ones that mattered: display:grid
   was overridden back to flex, so the column count did nothing and the cards
   sized themselves; and the sale badge kept its dark border and absolute
   position while only the background took. */
.wc-block-grid ul.wc-block-grid__products{display:grid;gap:16px;
list-style:none;margin:0;padding:0;
grid-template-columns:repeat(var(--pc-cols,5),minmax(0,1fr))}
.wc-block-grid ul.wc-block-grid__products > li.wc-block-grid__product{
margin:0;padding:14px;text-align:left;border:1px solid var(--pc-line);
border-radius:var(--pc-radius-lg);background:var(--pc-white);
/* The block sizes these as flex children — flex:1 0 25% and a width to
   match. In a grid the flex shorthand is inert but the width is not, so the
   cards kept collapsing to a quarter of their own track. */
width:auto;max-width:none;flex:none;
/* A column, so the button sits on the floor of every card and a row of
   cards ends level whether or not a product has reviews. */
display:flex;flex-direction:column}
.wc-block-grid ul.wc-block-grid__products > li.wc-block-grid__product > *:last-child{
margin-top:auto}
/* Capped, or a four-column grid on a wide screen gives 400px cards with
   370px of bottle in them. */
.wc-block-grid .wc-block-grid__product-image img{width:100%;height:auto;
max-height:230px;aspect-ratio:1;object-fit:contain;
background:var(--pc-bg);border-radius:var(--pc-radius)}
.wc-block-grid .wc-block-grid__product-link{display:block}
/* The block centres everything inside the card; the theme's own cards are
   left-aligned, and two card styles on one site read as two shops. */
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product,
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product *{text-align:left}
.wc-block-grid .wc-block-grid__product-add-to-cart{display:flex}
.wc-block-grid__products .wc-block-grid__product-title{margin:10px 0 6px;font-family:var(--pc-font-body);
font-size:14px;font-weight:500;line-height:1.35;color:var(--pc-ink)}
.wc-block-grid__product-price{font-size:15px;font-weight:700;color:var(--pc-magenta)}
.wc-block-grid__product-price del{font-size:13px;font-weight:400;color:var(--pc-muted);
margin-right:6px}
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-onsale{
display:inline-block;position:static;margin:0 0 6px;padding:3px 7px;
border:0;border-radius:3px;
background:var(--pc-magenta);color:var(--pc-white);
font-family:var(--pc-font-head);font-size:10px;font-weight:600;
letter-spacing:.05em;text-transform:uppercase;line-height:1.6}
.wc-block-grid__product-add-to-cart .wp-block-button__link{width:100%;
background:var(--pc-magenta);color:var(--pc-white);border-radius:var(--pc-radius);
font-family:var(--pc-font-head);font-size:11px;font-weight:500;letter-spacing:.12em;
text-transform:uppercase;padding:12px 16px}

/* The column count is the shop owner's, set on the block in the editor. The
   theme only supplies the card. */
.wc-block-grid.has-2-columns .wc-block-grid__products{--pc-cols:2}
.wc-block-grid.has-3-columns .wc-block-grid__products{--pc-cols:3}
.wc-block-grid.has-4-columns .wc-block-grid__products{--pc-cols:4}
.wc-block-grid.has-5-columns .wc-block-grid__products{--pc-cols:5}
.wc-block-grid.has-6-columns .wc-block-grid__products{--pc-cols:6}

@media (max-width:1200px){.wc-block-grid .wc-block-grid__products{--pc-cols:4}}
@media (max-width:1024px){.wc-block-grid .wc-block-grid__products{--pc-cols:3}}
@media (max-width:768px){.wc-block-grid .wc-block-grid__products{--pc-cols:2;gap:12px}}

/* The block grid draws its stars with WooCommerce's bundled icon font, which
   this theme does not load — so they render as the literal letters "SSSSS".
   Same fix as the theme's own stars, at the specificity the block uses. */
.wc-block-grid__product-rating .star-rating,
.wc-block-grid__product-rating .star-rating span{
font-family:"Segoe UI Symbol","Apple Symbols","Arial Unicode MS",sans-serif!important;
font-size:14px;letter-spacing:.08em}
.wc-block-grid__product-rating .star-rating::before,
.wc-block-grid__product-rating .star-rating span::before{
content:"\2605\2605\2605\2605\2605"!important;
font-family:"Segoe UI Symbol","Apple Symbols","Arial Unicode MS",sans-serif!important}
.wc-block-grid__product-rating .star-rating::before{color:var(--pc-line)}
.wc-block-grid__product-rating .star-rating span::before{color:var(--pc-star)}

/* --- Dreptul de retragere ------------------------------------------------
   WooCommerce 11.1 ships the form; the theme only makes it look like the
   rest of the shop. The field rows already inherit the .form-row rules
   above, so what is left is the copy around them: the two-step indicator,
   the review table, and the radio group. */

/* The one-line notice, wherever it appears. */
.pc-withdrawal-note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--pc-text-2)}
.pc-withdrawal-note a{color:var(--pc-ink);text-decoration:underline;text-underline-offset:2px}
.pc-withdrawal-note a:hover{color:var(--pc-magenta)}

.woocommerce-order-withdrawal-content{max-width:560px}
.woocommerce-order-withdrawal-content__intro{margin:0 0 8px;font-size:15px;line-height:1.55}
.woocommerce-order-withdrawal-content__note{margin:0 0 20px;font-size:13px;line-height:1.55;
color:var(--pc-text-2)}

/* Two steps, numbered because the order is real: you cannot confirm before
   you have entered the details. */
.woocommerce-order-withdrawal-content__steps{display:flex;flex-wrap:wrap;gap:8px;
list-style:none;margin:0 0 24px;padding:0;counter-reset:pc-step}
.woocommerce-order-withdrawal-content__step{display:flex;align-items:center;gap:8px;
padding:8px 14px 8px 10px;font-size:13px;color:var(--pc-text-2);
background:var(--pc-bg);border-radius:100px}
.woocommerce-order-withdrawal-content__step::before{counter-increment:pc-step;
content:counter(pc-step);display:grid;place-items:center;width:20px;height:20px;
font-size:11px;font-weight:600;color:var(--pc-white);background:var(--pc-faint);
border-radius:50%}
.woocommerce-order-withdrawal-content__step--current{color:var(--pc-ink);font-weight:500;
background:var(--pc-white);box-shadow:inset 0 0 0 1px var(--pc-ink)}
.woocommerce-order-withdrawal-content__step--current::before{background:var(--pc-ink)}

/* The radio group: full order, or specific items. */
.woocommerce-order-withdrawal-content__radio-field{margin:0 0 16px;padding:0;border:0}
.woocommerce-order-withdrawal-content__radio-field legend{margin-bottom:8px;padding:0;
font-size:14px;font-weight:500}
.woocommerce-order-withdrawal-content__radio-label{display:flex;align-items:center;gap:10px;
padding:12px 14px;margin-bottom:8px;font-size:14px;cursor:pointer;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);background:var(--pc-white)}
.woocommerce-order-withdrawal-content__radio-label:hover{border-color:var(--pc-ink)}
.woocommerce-order-withdrawal-content__radio-label:has(input:checked){border-color:var(--pc-ink);
box-shadow:inset 0 0 0 1px var(--pc-ink)}
.woocommerce-order-withdrawal-content__radio-label input{flex:0 0 auto;margin:0;
accent-color:var(--pc-magenta)}

.woocommerce-order-withdrawal-content__field-error{display:block;margin-top:4px;
font-size:13px;color:var(--pc-error)}
.woocommerce-invalid input.input-text,
.woocommerce-invalid textarea{border-color:var(--pc-error)}

/* The review screen: label/value pairs, same edges as everything else. */
.woocommerce-order-withdrawal-content__review{margin:0 0 20px;
border:1px solid var(--pc-line);border-radius:var(--pc-radius);overflow:hidden}
.woocommerce-order-withdrawal-content__review-row{display:grid;
grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:16px;
padding:12px 16px;border-bottom:1px solid var(--pc-line)}
.woocommerce-order-withdrawal-content__review-row:last-child{border-bottom:0}
.woocommerce-order-withdrawal-content__review dt{margin:0;font-size:13px;color:var(--pc-text-2)}
.woocommerce-order-withdrawal-content__review dd{margin:0;font-size:14px;
overflow-wrap:anywhere}

/* Core prints its own .button class here, which the theme styles nowhere —
   its own forms use .pc-btn. Rather than filter core's markup, give these
   two buttons the same shape .pc-btn has. */
.woocommerce-order-withdrawal-content__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.woocommerce-order-withdrawal-content__actions .button{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 28px;border-radius:var(--pc-radius);cursor:pointer;
font-family:var(--pc-font-head);font-size:11px;font-weight:500;
text-transform:uppercase;letter-spacing:.14em;line-height:1.2;
background:var(--pc-magenta);color:var(--pc-white);
border:1.5px solid var(--pc-magenta);
transition:background-color .15s,color .15s,border-color .15s}
.woocommerce-order-withdrawal-content__actions .button:hover{
background:var(--pc-magenta-hover);border-color:var(--pc-magenta-hover);color:var(--pc-white)}
/* Matches the base rule's specificity, so it actually wins. */
.woocommerce-order-withdrawal-content__actions .woocommerce-order-withdrawal-content__button--secondary{
background:transparent;color:var(--pc-ink);border-color:var(--pc-ink)}
.woocommerce-order-withdrawal-content__actions .woocommerce-order-withdrawal-content__button--secondary:hover{
background:var(--pc-ink);border-color:var(--pc-ink);color:var(--pc-white)}

@media (max-width:600px){
.woocommerce-order-withdrawal-content__review-row{grid-template-columns:1fr;gap:2px}
.woocommerce-order-withdrawal-content__actions .button{width:100%}
}
.pc-withdrawal-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;
font-size:13px;color:var(--pc-text-2)}
.pc-withdrawal-back::before{content:"\2190"}
.pc-withdrawal-back:hover{color:var(--pc-magenta)}

/* The withdrawal endpoint renders without the account navigation, so the
   two-column account grid would leave an empty gutter beside the form. */
.pc-withdrawal-page.woocommerce-account .woocommerce{display:block}
.pc-withdrawal-page .pc-withdrawal-back{margin-bottom:20px}
/* The right reads as the promise; the exception as the qualification on it. */
.pc-withdrawal-note__exception{color:var(--pc-muted)}

/* --- The favorites page --------------------------------------------------
   The list is painted by the browser, so the page ships in its empty state
   and the grid is revealed once there is something in it. */
.pc-favorites__intro{margin-bottom:24px}
.pc-favorites__busy{margin:32px 0;font-size:14px;color:var(--pc-text-2)}

.pc-favorites__empty{display:flex;flex-direction:column;align-items:center;gap:10px;
margin:40px 0;padding:48px 24px;text-align:center;
border:1px dashed var(--pc-line);border-radius:var(--pc-radius-lg);background:var(--pc-bg)}
.pc-favorites__empty svg{color:var(--pc-faint)}
.pc-favorites__empty p{margin:0;font-size:15px}
.pc-favorites__hint{color:var(--pc-text-2);font-size:13px!important}
.pc-favorites__empty .pc-btn{margin-top:10px}

.pc-favorites__list{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:8px 0 32px}
/* auto-fill measures a track against a floor, and 210px is wider than half a
   phone: two cards need 436px and the column is about 400, so the grid drops
   to one card per row and the page reads as a list of enormous products —
   nothing like the shop, where the same card sits two across. Below 768px the
   count is stated outright, matching .pc-crosssells and the block grids. */
@media (max-width:768px){.pc-favorites__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Both of these carry a `display`, and an author `display` beats the
   browser's own [hidden] rule however low its specificity — so without this
   the empty state stays on screen above the list it says is empty. */
.pc-favorites__empty[hidden],
.pc-favorites__list[hidden]{display:none}

/* Plain list, no panel and no rule: the accordion heading above it already
   says what this is. */
.pc-safety{margin:0;padding-left:20px;list-style:disc;
color:var(--pc-text-2);font-size:14px;line-height:1.55}
.pc-safety li+li{margin-top:6px}

.pc-favorites__note{margin:0 0 40px;font-size:13px;color:var(--pc-text-2)}
.pc-favorites__note a{color:var(--pc-ink);text-decoration:underline;text-underline-offset:2px}
.pc-favorites__note a:hover{color:var(--pc-magenta)}

/* On the product page the heart joins the quantity + buy row. `form.cart` is
   already a stretch flex row, so the button takes its height from the row
   rather than carrying one of its own — and for a variable product, where
   the form is display:block, the same row has to be made here. */
.single-product .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:12px;
align-items:stretch;margin:0 0 20px}

/* =========================================================================
 * WooCommerce's own widgets, in the theme's clothes
 *
 * The sidebar wrapper was styled and its contents were not, which is the
 * worst of the three possible states: a tidy heading over a product list
 * drawn at WooCommerce's defaults — full-width images, prices inline with
 * titles, a price slider with no slider. The widgets are ordinary shop
 * furniture and they get the same treatment as everything else here.
 * ====================================================================== */

/* --- Product lists: recent, top rated, on sale, cart --- */
.pc-widget .product_list_widget{margin:0;padding:0;list-style:none}
.pc-widget .product_list_widget li{display:grid;
grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;
padding:12px 0;border-bottom:1px solid var(--pc-line)}
.pc-widget .product_list_widget li:last-child{border-bottom:0}
.pc-widget .product_list_widget li>a{display:contents}
.pc-widget .product_list_widget img{grid-row:span 3;width:56px;height:56px;
object-fit:contain;border:1px solid var(--pc-line);border-radius:var(--pc-radius);
background:var(--pc-white);margin:0;float:none}
.pc-widget .product_list_widget .product-title{display:block;font-size:13px;
font-weight:500;line-height:1.35;color:var(--pc-ink)}
.pc-widget .product_list_widget li a:hover .product-title{color:var(--pc-magenta)}
.pc-widget .product_list_widget .star-rating{font-size:13px;margin:3px 0 0}
.pc-widget .product_list_widget .woocommerce-Price-amount{font-size:13px;
font-weight:600;color:var(--pc-magenta)}
.pc-widget .product_list_widget del .woocommerce-Price-amount{font-weight:400;
color:var(--pc-muted)}
.pc-widget .product_list_widget ins{text-decoration:none;background:none}

/* --- Price filter --- */
.pc-widget .price_slider_amount{display:grid;grid-template-columns:1fr 1fr;
gap:8px;align-items:center}
.pc-widget .price_slider_amount input[type="text"]{width:100%;height:38px;
padding:0 10px;font:inherit;font-size:13px;border:1px solid var(--pc-line);
border-radius:var(--pc-radius);background:var(--pc-white);color:var(--pc-ink)}
.pc-widget .price_slider_amount input[type="text"]:focus{outline:0;
border-color:var(--pc-magenta)}
.pc-widget .price_slider_amount .button{grid-column:1/-1;height:38px;
border:0;border-radius:var(--pc-radius);background:var(--pc-ink);
color:var(--pc-white);font-family:var(--pc-font-head);font-size:11px;
font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.pc-widget .price_slider_amount .button:hover{background:var(--pc-magenta)}
.pc-widget .price_label{grid-column:1/-1;font-size:13px;color:var(--pc-text-2)}
/* jQuery UI's slider, which WooCommerce ships unstyled without its theme. */
.pc-widget .ui-slider{position:relative;height:3px;margin:6px 0 16px;
background:var(--pc-line);border-radius:3px}
.pc-widget .ui-slider .ui-slider-range{position:absolute;height:100%;
background:var(--pc-magenta);border-radius:3px}
.pc-widget .ui-slider .ui-slider-handle{position:absolute;top:50%;width:16px;
height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;
background:var(--pc-white);border:2px solid var(--pc-magenta);cursor:grab;
box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* --- Category and layered-nav lists ---
 *
 * The count is a sibling of the link, not part of it — WooCommerce prints
 * `<a>Name</a> <span class="count">(4)</span>` — so the row has to be the
 * <li>. Laying out the <a> instead left the number to fall onto its own
 * line under every category, which is what turned a short list into a
 * column of orphaned figures. */
.pc-widget .product-categories,.pc-widget .woocommerce-widget-layered-nav-list{
margin:0;padding:0;list-style:none;font-size:14px}
.pc-widget .product-categories li,
.pc-widget .woocommerce-widget-layered-nav-list li{display:flex;
align-items:baseline;justify-content:space-between;gap:10px;padding:0;
border-bottom:1px solid var(--pc-line)}
.pc-widget .product-categories li:last-child,
.pc-widget .woocommerce-widget-layered-nav-list li:last-child{border-bottom:0}
.pc-widget .product-categories li a,
.pc-widget .woocommerce-widget-layered-nav-list li a{flex:1 1 auto;min-width:0;
padding:9px 0;font-size:14px;line-height:1.35;color:var(--pc-ink)}
.pc-widget .product-categories li a:hover,
.pc-widget .woocommerce-widget-layered-nav-list li a:hover{color:var(--pc-magenta)}
/* Where you already are, marked — the widget says so in a class and nothing
   was reading it. */
.pc-widget .product-categories li.current-cat>a{font-weight:600;color:var(--pc-magenta)}
.pc-widget .product-categories .count,
.pc-widget .woocommerce-widget-layered-nav-list .count{flex:0 0 auto;
font-size:12px;color:var(--pc-muted);font-variant-numeric:tabular-nums}
/* A child list is a row of its own inside the parent's flex row. */
.pc-widget .product-categories .children{flex:0 0 100%;
margin:0 0 6px 2px;padding-left:12px;border-left:1px solid var(--pc-line)}
.pc-widget .product-categories .children li{border-bottom:0}
.pc-widget .product-categories .children li a{padding:5px 0;font-size:13px;
color:var(--pc-text-2)}