/* ==========================================================================
   TERRA VERDE — woocommerce.css  (loaded only on shop / product / cart / etc.)
   Tokens come from theme.css :root.
   ========================================================================== */

.tv-shop{padding-block:clamp(40px,6vw,72px)}
.tv-shop .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* page header + breadcrumb */
/* WooCommerce's own sheet sets .92em grey at (0,2,0) on the pages whose body carries
   .woocommerce (shop, product, category); the cart and checkout bodies do not. */
.woocommerce .woocommerce-breadcrumb,.woocommerce-breadcrumb{font-size:.76rem;letter-spacing:.04em;color:var(--muted);margin:0 0 1.4rem;padding:0}
.woocommerce .woocommerce-breadcrumb a,.woocommerce-breadcrumb a{color:var(--ink)}
.woocommerce .woocommerce-breadcrumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--bronze)}
.woocommerce-products-header__title,.page-title{font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--ink);margin-bottom:.6rem}
.woocommerce-products-header{margin-bottom:1.4rem}
.term-description{color:var(--muted);max-width:60ch;margin-bottom:1.4rem}

/* category filter chips (the Scents catalogue's family chips share the bar) */
.tv-cat-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.tv-shop .chips.tv-cat-bar{margin-bottom:1.8rem}
.tv-shop .chips .chip{font-family:var(--f)}

/* result count + ordering */
/* WooCommerce's own stylesheet floats the count to the left; here it is a plain line
   above the grid (the sorting box is not printed, see inc/woocommerce.php). */
.woocommerce .woocommerce-result-count{float:none;color:var(--muted);font-size:.82rem;margin:0 0 1rem}
.tv-shop .prod-grid.tv-loop{clear:both}
.tv-shop select{font-family:var(--f);border:1px solid var(--line-strong);border-radius:100px;padding:.6em 1.1em;background:var(--white);color:var(--ink);font-size:.82rem}

/* --- general WooCommerce buttons -> brand pill --- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button{
  background:var(--violet);color:var(--cream);border:0;border-radius:100px;
  font-family:var(--f);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1em 1.9em;line-height:1;transition:transform .3s,background .3s;cursor:pointer}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--violet-2);transform:translateY(-2px);color:var(--cream)}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--violet)}
.woocommerce .button.wc-backward,.woocommerce a.added_to_cart{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}

/* --- single product ---
   Column 1 runs photo -> description -> specifications; column 2 is the buy
   box, pinned while column 1 scrolls and let go level with the end of the
   specifications, so both columns finish on the same line. */
.single-product div.product{display:grid;grid-template-columns:1.05fr .95fr;
  column-gap:clamp(2rem,5vw,4rem);row-gap:0;align-items:start}
.single-product div.product>.woocommerce-product-gallery{grid-column:1;grid-row:1}
.single-product div.product>.summary{grid-column:2;grid-row:1/span 2;align-self:start;
  position:sticky;top:calc(var(--top-h) + 20px)}
/* WooCommerce's layout stylesheet floats both columns at width:48% with a
   selector that outranks the rules above; the grid owns the columns now, so
   the widths go back to auto. Body carries .woocommerce and .single-product. */
.woocommerce.single-product div.product>.woocommerce-product-gallery,
.woocommerce.single-product div.product>.summary{width:auto;float:none}
.single-product div.product>.tv-details{grid-column:1;grid-row:2}
.single-product div.product>.woocommerce-notices-wrapper{grid-column:1/-1}
.single-product div.product .woocommerce-product-gallery{margin:0}
.single-product .woocommerce-product-gallery__image img{border-radius:var(--r)}
/* WooCommerce gives the zoom button z-index 99, above the menu drawer (80) and the search overlay (90): it showed through both on a phone */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{z-index:5}
.single-product .flex-control-thumbs{display:flex;gap:.6rem;margin-top:.9rem;padding:0;list-style:none}
.single-product .flex-control-thumbs li{width:auto}
.single-product .flex-control-thumbs img{border-radius:10px;border:1px solid var(--line);opacity:.7;transition:.3s}
.single-product .flex-control-thumbs img.flex-active,.single-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--bronze)}
.single-product .product_title{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:300;margin-bottom:.4rem}
.tv-single-coverage{margin-bottom:1rem}
.tv-coverage{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:rgba(174,169,137,.24);padding:.45em .9em;border-radius:100px}
/* Buy-box price, written at (0,4,2) so it outranks WooCommerce's own
   `.woocommerce div.product p.price` (green, 1.25em) which is still loaded. */
.woocommerce div.product .summary .price,.woocommerce div.product .summary p.price,.woocommerce div.product .summary span.price,
.single-product .summary .price,.single-product .summary p.price{color:var(--ink);font-size:1.5rem;font-weight:600;margin:.6rem 0 1rem}
.woocommerce div.product .summary .price del,.single-product .summary .price del{color:var(--muted);font-size:1rem;font-weight:400;margin-right:.5em;opacity:1;display:inline}
.woocommerce div.product .summary .price ins,.single-product .summary .price ins{text-decoration:none;font-weight:600}
.single-product .woocommerce-product-details__short-description{color:var(--body);line-height:1.7;margin-bottom:1.4rem}
.single-product .stock.in-stock{color:var(--sage-deep);font-weight:600;font-size:.85rem}
.single-product .stock.out-of-stock{color:#a4553a;font-weight:600}

/* variations + quantity */
.single-product .variations{margin-bottom:1rem;border:0}
.single-product .variations th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.5em 0}
.single-product .variations select{font-family:var(--f);border:1px solid var(--line-strong);border-radius:10px;padding:.7em 1em;background:var(--white);min-width:180px}
/* the buy row: Add to cart first and the quantity beside it, on a simple product
   (the row is the form) and on a variable one (the row sits in its own box under
   the pills) alike */
.single-product form.cart,.single-product .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.single-product form.cart{margin:1.2rem 0}
.single-product .single_variation_wrap{width:100%}
.single-product form.cart .single_add_to_cart_button{order:-1}
/* quantity: a minus, the number, a plus (buttons from inc/woocommerce.php, clicks in main.js) */
.woocommerce .quantity{display:inline-flex;align-items:stretch;height:52px;border:1px solid var(--line-strong);border-radius:100px;overflow:hidden;background:var(--white);float:none;margin:0}
.woocommerce .quantity .qty{width:52px;height:auto;min-height:0;text-align:center;border:0;border-radius:0;padding:0;background:transparent;font-family:var(--f);font-size:1rem;color:var(--ink);outline:none;-moz-appearance:textfield;appearance:textfield}
.woocommerce .quantity .qty::-webkit-outer-spin-button,.woocommerce .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.woocommerce .quantity .tv-qty-btn{width:44px;border:0;padding:0;background:transparent;font-family:var(--f);font-size:1.2rem;line-height:1;color:var(--ink);cursor:pointer;transition:background .25s}
.woocommerce .quantity .tv-qty-btn:hover{background:var(--paper)}
.woocommerce .quantity:has(.qty[readonly]) .tv-qty-btn{display:none}
.woocommerce .quantity:has(.qty[type="hidden"]){display:none}
.woocommerce div.product form.cart div.quantity{float:none;margin:0}
.woocommerce div.product form.cart .button{float:none}
.single-product .single_add_to_cart_button{min-width:200px;padding:1.2em 2.4em!important}

/* buy-box trust + free oil */
.tv-buybox-trust{list-style:none;padding:0;margin:1rem 0 0;display:flex;gap:1.2rem;flex-wrap:wrap}
.tv-buybox-trust li{display:flex;align-items:center;gap:.5em;font-size:.78rem;color:var(--ink)}
.tv-buybox-trust .icon{width:20px;height:20px;stroke:var(--bronze)}
/* the free-scents reminder: right UNDER the Add to cart row and Midnight
   Violet like the button, so the two read as one block (owner's pick). The
   scents themselves are chosen in the picker that opens once the button is
   pressed. */
.tv-freescent{display:flex;align-items:center;gap:.7rem;margin:.1rem 0 1.1rem;padding:.85rem 1.1rem;border-radius:14px;
  background:var(--violet);color:rgba(243,237,220,.82);font-size:.82rem;line-height:1.45}
.tv-freescent .icon{width:20px;height:20px;stroke:var(--sage);flex:none}
.tv-freescent b{font-weight:600;color:var(--cream)}
/* ...and the reminder under the item in the order review / mini cart */
.tv-free.tv-gift{display:inline-block;margin-top:.35rem;font-size:.64rem;line-height:1.4}
/* cart page: the two scents as small dropdowns under the diffuser's name, so
   they can still be changed before checkout */
.tv-gift-edit{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin-top:.55rem}
.tv-gift-edit .tv-gift-k{flex:0 0 100%;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tv-shop select.tv-gift-sel,.tv-gift-sel{font-family:var(--f);font-size:.74rem;font-weight:500;color:var(--ink);background:var(--white);border:1px solid var(--line-strong);border-radius:8px;
  padding:.42em 1.9em .42em .7em;max-width:170px;min-width:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23271732' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55em center;background-size:11px}
.tv-gift-sel:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ---------- bottle sizes on a scent product (main.js turns the Size dropdown into pills) ---------- */
.tv-pilled{display:none}
.tv-attr{flex:0 0 100%}
.tv-pills-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:.2rem 0 .5rem}
.tv-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.2rem}
.tv-pill{font-family:var(--f);display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;min-width:92px;padding:.6em 1.1em;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--white);color:var(--ink);cursor:pointer;transition:.25s;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.tv-pill small{font-size:.7rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.tv-pill:hover{border-color:var(--violet)}
.tv-pill[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.tv-pill[aria-pressed="true"] small{color:rgba(243,237,220,.8)}
.tv-pill[aria-disabled="true"]{opacity:.35}
/* a colour attribute is a row of swatches; the disc is the colour, a bronze ring marks the chosen one */
.tv-swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.2rem}
.tv-swatch{width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;background:var(--sw);background-clip:padding-box;
  border:2px solid transparent;box-shadow:0 0 0 1px var(--line-strong);transition:box-shadow .25s,border-color .25s}
.tv-swatch:hover{box-shadow:0 0 0 1px var(--violet)}
.tv-swatch[aria-pressed="true"]{border-color:var(--bronze);box-shadow:0 0 0 1px var(--bronze)}
.tv-swatch[aria-disabled="true"]{opacity:.35}
/* the swatch colours, by the option's slug; a colour with no entry here is shown as a pill with its name */
.tv-swatch[data-value="black"]{--sw:#1b1b1f}
.tv-swatch[data-value="white"]{--sw:#f2efe9}
.tv-swatch[data-value="grey"],.tv-swatch[data-value="gray"]{--sw:#7f8888}
.tv-swatch[data-value="red"]{--sw:#6d1f2b}
.tv-swatch[data-value="gold"],.tv-swatch[data-value="rose-gold"]{--sw:#c98f6f}
.tv-swatch[data-value="silver"]{--sw:#c9ccce}

/* ---------- free-scent picker (opens on Add to cart) ---------- */
.tv-scentpick{position:fixed;inset:0;z-index:200}
.tv-scentpick[hidden]{display:none}
.tv-scentpick .sp-back{position:absolute;inset:0;background:rgba(39,23,50,.55)}
.tv-scentpick .sp-card{position:relative;z-index:2;display:flex;flex-direction:column;width:min(660px,calc(100% - 2rem));
  max-height:min(86vh,760px);margin:7vh auto;background:var(--white);border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(39,23,50,.6)}
.tv-scentpick .sp-head{position:relative;padding:1.5rem 3.2rem 1.1rem 1.6rem;border-bottom:1px solid var(--line)}
.tv-scentpick .sp-head h2{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:300;margin:.45rem 0 .5rem}
.tv-scentpick .sp-head p{font-size:.85rem;color:var(--body);font-weight:300;margin:0}
.tv-scentpick .sp-x{position:absolute;top:1.1rem;right:1.1rem;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--white);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.25s}
.tv-scentpick .sp-x:hover{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.tv-scentpick .sp-x .icon{width:18px;height:18px}
/* the two slots: which scent is being chosen, and what is chosen so far */
.tv-scentpick .sp-slots{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;padding:1px;max-height:min(174px,30vh);overflow-y:auto}
.tv-scentpick .sp-slots[hidden]{display:none}
.tv-scentpick .sp-slot{flex:1 1 calc(50% - .3rem);min-width:0;display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:.6rem .8rem;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--paper);cursor:pointer;font-family:var(--f);transition:.25s}
.tv-scentpick .sp-slot-k{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tv-scentpick .sp-slot-v{font-size:.86rem;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-scentpick .sp-slot.is-set .sp-slot-v{color:var(--ink);font-weight:500}
.tv-scentpick .sp-slot.is-active{border-color:var(--violet);background:var(--white);box-shadow:0 0 0 1px var(--violet)}
.tv-scentpick .sp-slot.is-active .sp-slot-k{color:var(--violet)}
.tv-scentpick .sp-slot:focus-visible{outline-offset:-2px} /* inside the button: the bar clips what lies outside it */
.tv-scentpick .sp-list{overflow-y:auto;padding:1.1rem 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.65rem;align-content:start}
.tv-scentpick .sp-opt{display:block;min-width:0;cursor:pointer}
.tv-scentpick .sp-opt input{position:absolute;opacity:0;width:0;height:0}
.tv-scentpick .sp-b{display:block;height:100%;padding:.8rem .95rem;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);transition:border-color .25s,background .25s,color .25s}
.tv-scentpick .sp-opt:hover .sp-b{border-color:var(--line-strong)}
.tv-scentpick .sp-n{display:block;font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3}
.tv-scentpick .sp-d{display:block;font-size:.74rem;color:var(--muted);line-height:1.45;margin-top:.2rem}
.tv-scentpick .sp-opt input:checked + .sp-b{background:var(--violet);border-color:var(--violet)}
.tv-scentpick .sp-opt input:checked + .sp-b .sp-n{color:var(--cream)}
.tv-scentpick .sp-opt input:checked + .sp-b .sp-d{color:rgba(243,237,220,.75)}
.tv-scentpick .sp-opt input:focus-visible + .sp-b{outline:2px solid var(--bronze);outline-offset:2px}
.tv-scentpick .sp-foot{display:flex;justify-content:flex-end;gap:.7rem;flex-wrap:wrap;padding:1.1rem 1.6rem;border-top:1px solid var(--line);background:var(--white)}
.tv-scentpick .sp-foot .btn{font-size:.74rem;padding:.95em 1.8em}
.tv-scentpick .sp-foot .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.tv-scentpick .sp-foot .btn-ghost:hover{background:var(--linen)}
.tv-scentpick .sp-foot .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media(max-width:640px){
  .tv-scentpick .sp-card{width:100%;max-height:100%;height:100%;margin:0;border-radius:0}
  .tv-scentpick .sp-list{grid-template-columns:1fr;padding:1rem 1.1rem}
  .tv-scentpick .sp-head{padding:1.2rem 3rem 1rem 1.1rem}
  .tv-scentpick .sp-foot{padding:.9rem 1.1rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom))}
  .tv-scentpick .sp-foot .btn{flex:1 1 auto;justify-content:center}
}

/* sale flash */
.woocommerce span.onsale{background:var(--bronze);color:#fff;border-radius:100px;font-size:.66rem;font-weight:700;letter-spacing:.05em;
  min-height:0;min-width:0;padding:.4em .8em;top:12px;right:12px;left:auto;margin:0;line-height:1}

/* tabs */
.woocommerce-tabs{margin-top:clamp(2.5rem,5vw,4rem);grid-column:1/-1}
.woocommerce-tabs ul.tabs{list-style:none;padding:0;margin:0 0 1.5rem;border-bottom:1px solid var(--line);display:flex;gap:.4rem;flex-wrap:wrap}
.woocommerce-tabs ul.tabs::before{display:none}
.woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0;padding:0}
.woocommerce-tabs ul.tabs li a{padding:.8em 1.2em;color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid transparent}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--bronze)}
.woocommerce-tabs .panel h2{font-size:1.3rem;font-weight:400;margin-bottom:1rem}
.tv-specs{width:100%;border-collapse:collapse;max-width:560px}
.tv-specs th,.tv-specs td{text-align:left;padding:.8em 0;border-bottom:1px solid var(--line);font-size:.9rem}
.tv-specs th{color:var(--body);font-weight:600;width:40%}
.tv-specs td{color:var(--ink)}

/* reviews */
.woocommerce #reviews .comment-text{border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.woocommerce .star-rating span,.woocommerce p.stars a{color:var(--bronze)}

/* --- notices --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border-radius:12px;border:1px solid var(--line);border-top:3px solid var(--sage);background:var(--white);
  padding:1em 1.4em;color:var(--ink);font-size:.9rem;list-style:none}
.woocommerce-error{border-top-color:#c06a45}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-message .button,.woocommerce-info .button{padding:.6em 1.2em!important;font-size:.72rem}

/* "Back to all diffusers" / "Back to cart" above a breadcrumb */
.tv-shop .tv-back{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.tv-shop .tv-back:hover{color:var(--bronze)}

/* --- cart & checkout pages (page.php gives both the .tv-shop frame) --- */
.tv-wc-page .page-title{margin-bottom:0}

/* --- cart: the table on the left, the totals card on the right --- */
.woocommerce-cart .tv-wc-page .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:2rem;align-items:start;margin-top:1.6rem}
.woocommerce-cart .tv-wc-page .woocommerce>*{grid-column:1/-1;min-width:0}
.woocommerce-cart .tv-wc-page .woocommerce>form.woocommerce-cart-form{grid-column:1}
.woocommerce-cart .tv-wc-page .woocommerce>.cart-collaterals{grid-column:2}
.woocommerce-cart .tv-wc-page .woocommerce>.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-cart form.woocommerce-cart-form{overflow-x:auto}
.woocommerce-cart table.shop_table.cart{width:100%;margin:0;border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--white)}
.woocommerce-cart table.shop_table.cart th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;text-align:left;padding:1rem .8rem;border-bottom:1px solid var(--line);line-height:1.4}
.woocommerce-cart table.shop_table.cart td{padding:1rem .8rem;border-top:0;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.5}
.woocommerce-cart table.shop_table.cart tr:last-child td{border-bottom:0}
/* the cell is sized from the photo; max-width:none, or the img{max-width:100%} of the theme
   and of WooCommerce would cap it at the cell's content box and let the column collapse */
.woocommerce-cart table.shop_table.cart td.product-thumbnail{width:calc(96px + 1.6rem)}
.woocommerce-cart table.shop_table.cart td.product-thumbnail img{width:96px;height:96px;max-width:none;object-fit:contain;border-radius:12px;background:var(--linen);padding:6px}
.woocommerce-cart .cart_item .product-name a{color:var(--ink);font-weight:500;font-size:.95rem}
.woocommerce-cart .cart_item .product-name .variation{font-size:.74rem;color:var(--muted);margin:.15rem 0 0;display:flex;gap:.3em;flex-wrap:wrap}
.woocommerce-cart .cart_item .product-name .variation dt,.woocommerce-cart .cart_item .product-name .variation dd{margin:0;padding:0;font-weight:400;border:0;float:none;display:inline}
.woocommerce-cart .cart_item .product-name .variation dd p{display:inline;margin:0}
.woocommerce-cart .cart_item .product-price,.woocommerce-cart .cart_item .product-subtotal{font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.woocommerce a.remove{width:30px;height:30px;line-height:28px;font-size:1rem;border-radius:50%;border:1px solid var(--line-strong);background:var(--white);color:var(--ink)!important;text-align:center;font-weight:400}
.woocommerce a.remove:hover{background:var(--violet);border-color:var(--violet);color:var(--cream)!important}
/* the cart's quantity control is lighter: two small round buttons around the number */
.woocommerce-cart .quantity{height:auto;border:0;background:transparent;overflow:visible;align-items:center;gap:.6em}
.woocommerce-cart .quantity .tv-qty-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);background:var(--white);font-size:1rem}
.woocommerce-cart .quantity .tv-qty-btn:hover{background:var(--violet);border-color:var(--violet);color:var(--cream)}
.woocommerce-cart .quantity .qty{width:36px;font-size:.95rem}
/* the coupon row at the foot of the table. Update cart is hidden: main.js presses it for
   the visitor on any quantity change, so the totals follow without a button */
.woocommerce-cart table.shop_table.cart td.actions{padding:.9rem 1.1rem;background:var(--paper);text-align:left}
.woocommerce-cart table.shop_table.cart td.actions .coupon{display:flex;align-items:center;gap:.5rem;float:none}
.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text{width:180px;border:1px solid var(--line-strong);border-radius:100px;padding:.75em 1.1em;font-family:var(--f);font-size:.82rem;background:var(--white);color:var(--ink)}
.woocommerce-cart table.shop_table.cart td.actions .button{font-size:.7rem;padding:.9em 1.4em}
.woocommerce-cart table.shop_table.cart td.actions>.button[name="update_cart"]{display:none}
.woocommerce .cart-collaterals{width:auto}
.woocommerce .cart-collaterals .cart_totals{float:none;width:auto;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;background:var(--white)}
.cart_totals h2{font-size:1.3rem;font-weight:400;margin:0 0 1.1rem}
.woocommerce .cart_totals table.shop_table{width:100%;margin:0;border:0;background:transparent;border-collapse:collapse;border-spacing:0}
.woocommerce .cart_totals table.shop_table th,.woocommerce .cart_totals table.shop_table td{padding:.65rem 0;border:0;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums;vertical-align:middle}
.woocommerce .cart_totals table.shop_table th{color:var(--body);text-align:left;width:auto}
.woocommerce .cart_totals table.shop_table td{text-align:right;color:var(--ink)}
.woocommerce .cart_totals table.shop_table tr.order-total th,.woocommerce .cart_totals table.shop_table tr.order-total td{border-bottom:0;font-weight:600;color:var(--ink);font-size:1.05rem}
.woocommerce .cart_totals table.shop_table tr.order-total .amount{font-weight:600}
/* WooCommerce's small-screen sheet stacks the rows and re-prints the labels in bold from
   data-title, with a grey band on every second row; the card keeps its rows on a phone. */
.woocommerce .cart_totals table.shop_table tr{display:table-row}
.woocommerce .cart_totals table.shop_table th{display:table-cell}
.woocommerce .cart_totals table.shop_table td{display:table-cell}
.woocommerce .cart_totals table.shop_table td::before{content:none}
.woocommerce .cart_totals table.shop_table tr:nth-child(2n) td{background-color:transparent}
/* one shipping method, free: the pill alone, no destination line or calculator */
.woocommerce .cart_totals .shipping td{line-height:2}
.woocommerce .cart_totals .tv-free,.woocommerce-checkout #order_review .tv-free{margin:0}
.woocommerce .cart_totals ul#shipping_method{margin:0;padding:0;list-style:none}
.woocommerce .cart_totals ul#shipping_method li{margin:0;padding:0}
.woocommerce .cart_totals ul#shipping_method input{display:none}
.woocommerce .cart_totals ul#shipping_method label{display:inline;margin:0}
.woocommerce-cart .woocommerce-shipping-destination,.woocommerce-cart .woocommerce-shipping-calculator,.woocommerce-cart .shipping-calculator-button{display:none}
.woocommerce .cart_totals .tv-ship-note{font-size:.72rem;color:var(--muted);margin:.5rem 0 1.2rem}
.woocommerce .wc-proceed-to-checkout{padding:0}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:flex;justify-content:center;width:100%;
  background:var(--violet);color:var(--cream);border-radius:100px;font-size:.82rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:1.15em 2em;margin:0}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover{background:var(--violet-2);transform:translateY(-2px)}
/* an empty cart */
.woocommerce-cart .wc-empty-cart-message .cart-empty{margin:0 0 1.2rem}
.woocommerce-cart .return-to-shop{margin:0}

/* --- checkout: the form on the left, the "Your order" card on the right --- */
.woocommerce form.woocommerce-checkout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.2rem;align-items:start;margin-top:1.6rem}
.woocommerce form.woocommerce-checkout>*{grid-column:1;min-width:0}
.woocommerce form.woocommerce-checkout>.tv-order-box{grid-column:2}
/* checkout.js prepends its error / update notices into the form: a full row of their
   own, so the fields and the order card still share the row beneath */
.woocommerce form.woocommerce-checkout>.woocommerce-NoticeGroup{grid-column:1/-1}
.woocommerce form.woocommerce-checkout>.woocommerce-NoticeGroup .woocommerce-error{margin:0}
.woocommerce-checkout .col2-set,.woocommerce-checkout #customer_details{display:block;width:auto}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:auto}
.woocommerce-checkout form h3{font-size:1.25rem;font-weight:400;margin:0 0 1.2rem;color:var(--ink)}
.woocommerce-checkout .woocommerce-additional-fields>h3{display:none}
/* "Ship to a different address?" (only printed while WooCommerce allows a second address) */
.woocommerce-checkout h3#ship-to-different-address{font-size:.9rem;font-weight:500;margin:.4rem 0 1rem}
.woocommerce-checkout h3#ship-to-different-address label{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;margin:0}
.woocommerce-checkout h3#ship-to-different-address input{margin:0;accent-color:var(--violet)}
/* fields: two columns; a wide row spans both */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.woocommerce-checkout form .form-row{margin:0;padding:0;float:none;width:auto;overflow:visible}
.woocommerce-checkout form .form-row-wide,.woocommerce-checkout form .form-row.notes{grid-column:1/-1}
.woocommerce-checkout form .form-row label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin:0 0 .35rem;line-height:1.4}
.woocommerce-checkout form .form-row .required{visibility:visible;color:var(--bronze);font-weight:600;text-decoration:none;border:0}
.woocommerce-checkout form .form-row .optional{color:inherit;font-weight:inherit}
.woocommerce-checkout form .form-row .woocommerce-input-wrapper{display:block}
.woocommerce-checkout form .form-row input.input-text,.woocommerce-checkout form .form-row textarea,.woocommerce-checkout form .form-row select{width:100%;box-shadow:none}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{border:1px solid var(--line-strong)!important;border-radius:10px;padding:.85em 1em;font-family:var(--f);font-size:.92rem;background:var(--white);color:var(--ink);min-height:auto}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{outline:none;border-color:var(--bronze)!important}
.woocommerce form .form-row textarea{height:auto;min-height:5.5em}
.select2-container--default .select2-selection--single{height:auto;display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.5;padding:0;color:var(--ink)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;top:0}
/* one country only: WooCommerce prints the row with a one-option select, which the form
   does without (its value is still submitted); !important beats any inline display */
.woocommerce-checkout #billing_country_field,.woocommerce-checkout #shipping_country_field{display:none!important}
/* the card on the right */
.woocommerce-checkout .tv-order-box{border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:1.6rem;position:sticky;top:calc(var(--top-h) + 12px)}
.woocommerce-checkout .tv-order-box h3{margin-bottom:1.2rem}
.woocommerce-checkout #order_review{border:0;border-radius:0;background:transparent;padding:0}
.woocommerce-checkout #order_review table.shop_table{width:100%;margin:0 0 .6rem;border:0;background:transparent;border-collapse:collapse;border-spacing:0}
.woocommerce-checkout #order_review table.shop_table thead{display:none}
.woocommerce-checkout #order_review table.shop_table th,.woocommerce-checkout #order_review table.shop_table td{padding:.6rem 0;border:0;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:400;text-align:left;line-height:1.5;font-variant-numeric:tabular-nums;vertical-align:middle;color:var(--body)}
.woocommerce-checkout #order_review table.shop_table td:last-child,.woocommerce-checkout #order_review table.shop_table th:last-child{text-align:right;color:var(--ink);white-space:nowrap}
.woocommerce-checkout #order_review table.shop_table .product-name{color:var(--ink)}
.woocommerce-checkout #order_review table.shop_table .product-quantity{font-weight:400;color:var(--muted)}
.woocommerce-checkout #order_review table.shop_table .variation{font-size:.74rem;color:var(--muted);margin:.15rem 0 0;display:flex;gap:.3em;flex-wrap:wrap}
.woocommerce-checkout #order_review table.shop_table .variation dt,.woocommerce-checkout #order_review table.shop_table .variation dd{margin:0;padding:0;display:inline;font-weight:400;border:0;float:none}
.woocommerce-checkout #order_review table.shop_table .variation dd p{display:inline;margin:0}
.woocommerce-checkout #order_review table.shop_table tr.order-total th,.woocommerce-checkout #order_review table.shop_table tr.order-total td{border-bottom:0;font-weight:600;color:var(--ink);font-size:1.02rem}
.woocommerce-checkout #order_review table.shop_table tr.order-total .amount{font-weight:600}
.woocommerce-checkout #order_review .shipping td{line-height:2}
.woocommerce-checkout #order_review ul#shipping_method{margin:0;padding:0;list-style:none}
.woocommerce-checkout #order_review ul#shipping_method li{margin:0;padding:0}
.woocommerce-checkout #order_review ul#shipping_method input{display:none}
.woocommerce-checkout #order_review ul#shipping_method label{display:inline;margin:0}
/* payment methods */
.woocommerce-checkout #payment{margin-top:1rem;background:var(--paper);border:0;border-radius:12px;padding:1.1rem 1.2rem}
.woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:0}
.woocommerce-checkout #payment ul.payment_methods li{margin:0 0 .6rem;line-height:1.6}
.woocommerce-checkout #payment ul.payment_methods li:last-child{margin-bottom:0}
.woocommerce-checkout #payment ul.payment_methods li input.input-radio{margin:0 .6em 0 0;vertical-align:middle;accent-color:var(--violet)}
.woocommerce-checkout #payment ul.payment_methods li label{display:inline;font-weight:600;color:var(--ink);font-size:.92rem;cursor:pointer;vertical-align:middle}
.woocommerce #payment ul.payment_methods li label img{display:inline-block;vertical-align:middle;width:auto;height:auto;max-height:22px;margin-left:.35rem} /* gateway icons in a row (theme img is block) */
.woocommerce-checkout #payment div.payment_box{width:auto;background:transparent;border-radius:0;padding:0;margin:.4rem 0 0 1.6rem;font-size:.8rem;color:var(--muted);line-height:1.5}
.woocommerce-checkout #payment div.payment_box p{margin:0 0 .4rem}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:0}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{margin:0}
.woocommerce-checkout #place_order{width:100%;float:none;margin-top:1.2rem;padding:1.2em!important}

/* --- account --- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.3rem}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:block;padding:.7em 1em;border-radius:10px;color:var(--ink)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--violet);color:var(--cream)}
.woocommerce-MyAccount-content{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;background:var(--white)}

/* responsive */
@media(max-width:860px){
  /* one column: the top-right corner is the gallery's zoom button, so the badge takes the top-left */
  .single-product div.product>span.onsale{right:auto;left:12px}
  .single-product div.product{grid-template-columns:1fr}
  .single-product div.product>.woocommerce-product-gallery,
  .single-product div.product>.summary,
  .single-product div.product>.tv-details{grid-column:1;grid-row:auto;position:static}
}
/* beside a 380px totals card the table has about 740px on a 1280px laptop: slimmer cells and
   photos there, so its six columns fit without a scrollbar */
@media(max-width:1440px){
  .woocommerce-cart table.shop_table.cart th,.woocommerce-cart table.shop_table.cart td{padding:.9rem .6rem}
  .woocommerce-cart table.shop_table.cart td.product-thumbnail{width:calc(80px + 1.2rem)}
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img{width:80px;height:80px}
  .woocommerce-cart .quantity{gap:.45em}
}
/* narrower than that the totals card drops under the table, which then has the whole width */
@media(max-width:1280px){
  .woocommerce-cart .tv-wc-page .woocommerce{grid-template-columns:minmax(0,1fr)}
  .woocommerce-cart .tv-wc-page .woocommerce>.cart-collaterals{grid-column:1;grid-row:auto}
}
@media(max-width:860px){
  .woocommerce form.woocommerce-checkout{grid-template-columns:minmax(0,1fr)}
  .woocommerce form.woocommerce-checkout>.tv-order-box{grid-column:1;grid-row:auto}
  .woocommerce-checkout .tv-order-box{position:static}
}
/* WooCommerce's small-screen sheet turns the cart table into stacked "Label: value"
   blocks with no photo; the design keeps the table and lets it scroll sideways. */
@media(max-width:768px){
  .woocommerce-cart table.shop_table.cart{min-width:560px}
  .woocommerce-cart table.shop_table.cart thead{display:table-header-group}
  .woocommerce-cart table.shop_table.cart tr{display:table-row}
  .woocommerce-cart table.shop_table.cart tr th,.woocommerce-cart table.shop_table.cart tr td{display:table-cell;text-align:left!important;padding:.8rem .6rem}
  .woocommerce-cart table.shop_table.cart tr td::before{content:none;display:none}
  .woocommerce-cart table.shop_table.cart tr.cart_item:nth-child(2n) td{background-color:transparent}
  .woocommerce-cart table.shop_table.cart .product-thumbnail{display:table-cell}
  .woocommerce-cart table.shop_table.cart td.product-thumbnail{width:calc(72px + 1.2rem)}
  .woocommerce-cart table.shop_table.cart td.product-thumbnail img{width:72px;height:72px;max-width:none}
  .woocommerce-cart table.shop_table.cart td.actions .button{display:inline-block;width:auto}
  .woocommerce-cart table.shop_table.cart td.actions .coupon{float:none;padding:0}
  .woocommerce-cart table.shop_table.cart td.actions .coupon::before,.woocommerce-cart table.shop_table.cart td.actions .coupon::after{content:none}
}
@media(max-width:640px){
  .woocommerce-cart table.shop_table.cart th.product-price,.woocommerce-cart table.shop_table.cart td.product-price{display:none}
  /* On a phone the table would be wider than the screen and scroll sideways, with the
     quantity and the subtotal out of sight. Each row becomes a small card instead:
     the photo on the left, the name and the free-scent choice beside it, the remove
     button in the corner, then the stepper and the subtotal on a line of their own. */
  .woocommerce-cart table.shop_table.cart{min-width:0}
  .woocommerce-cart table.shop_table.cart thead{display:none}
  .woocommerce-cart table.shop_table.cart tbody,.woocommerce-cart table.shop_table.cart tr{display:block}
  .woocommerce-cart table.shop_table.cart tr.cart_item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"thumb name remove" "qty qty qty";column-gap:.8rem;row-gap:.7rem;align-items:center;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .woocommerce-cart table.shop_table.cart tr.cart_item td{display:block;padding:0;border:0}
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail{grid-area:thumb;width:auto;align-self:start}
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name{grid-area:name}
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove{grid-area:remove;justify-self:end;align-self:start}
  /* the stepper and the subtotal share the second line, one at each end; the line runs
     the whole width of the card, under the photo too, so "EGP 14,000" and the stepper
     clear each other on a 360px phone */
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity{grid-area:qty;justify-self:start}
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal{grid-area:qty;justify-self:end;font-weight:600}
  .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price{display:none}
  .woocommerce-cart .tv-shop select.tv-gift-sel{max-width:100%} /* the base rule caps it at 170px; here it fills the name column */
  .woocommerce-cart table.shop_table.cart td.actions{display:block;padding:.9rem 1rem}
  .woocommerce-cart table.shop_table.cart td.actions .coupon{flex-wrap:wrap}
  .woocommerce-cart table.shop_table.cart td.actions .coupon .input-text{width:auto;flex:1 1 110px;min-width:0}
  .woocommerce-cart table.shop_table.cart td.actions .coupon .button{font-size:.64rem;padding:1em 1.05em} /* narrower, so "Coupon code" shows whole beside it on a 360px phone */
}
@media(max-width:560px){
  .single-product form.cart,.single-product .woocommerce-variation-add-to-cart{flex-direction:column;align-items:stretch}
  .single-product .single_add_to_cart_button{width:100%}
  .woocommerce .quantity{align-self:flex-start}
}
@media(max-width:480px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
}


/* ---------- product details: description + specs stacked (no tabs) ---------- */
.tv-details{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:start}
.tv-details h2{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--body);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.tv-details .tv-desc p{margin-bottom:1rem;line-height:1.75}
/* a scent whose description is still to be written keeps the space for it */
.tv-details .tv-desc-empty{min-height:150px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--white)}
.tv-details .tv-specs{max-width:none}
@media(max-width:860px){.tv-details{grid-template-columns:1fr}}
.tv-details .tv-desc,.tv-details .tv-spec-block{max-width:820px}
/* WooCommerce attribute table (Type / Colour on the Mini) styled like the specs table */
.tv-details .woocommerce-product-attributes{width:100%;border-collapse:collapse}
.tv-details .woocommerce-product-attributes th,.tv-details .woocommerce-product-attributes td{text-align:left;padding:.8em 0;border-bottom:1px solid var(--line);font-size:.9rem}
.tv-details .woocommerce-product-attributes th{color:var(--body);font-weight:600;width:40%}
.tv-details .woocommerce-product-attributes td{color:var(--ink)}
.tv-details .woocommerce-product-attributes td p{margin:0}