/* ============================================================
   ANVYA — woo.css
   WooCommerce-page styling only. WC stock CSS is dropped
   (woocommerce_enqueue_styles => []), so this file owns everything.
   Monochrome black/white + one --red accent, reusing app.css tokens.
   ============================================================ */

/* ============================================================
   0. SEARCH OVERLAY + HEADER SCROLL (theme chrome helpers)
   ============================================================ */
.anvya-search-overlay{
  position:fixed;inset:0;z-index:95;background:rgba(255,255,255,.98);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:.28s var(--ease);
}
.anvya-search-overlay.open{opacity:1;visibility:visible}
.anvya-search-close{position:absolute;top:22px;right:26px;background:none;border:none;font-size:34px;line-height:1;color:var(--ink);cursor:pointer}
.anvya-search-form{display:flex;gap:12px;width:100%;max-width:640px;border-bottom:2px solid var(--ink);padding-bottom:10px;flex-wrap:wrap}
.anvya-search-form input[type=search]{flex:1;min-width:0;border:none;background:transparent;font-family:var(--serif);font-size:clamp(24px,4vw,40px);outline:none;color:var(--ink)}
.site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.06)}

/* ============================================================
   1. WC BASE (since WC's stock CSS is gone)
   ============================================================ */
.woocommerce form .form-row{display:block;margin:0 0 14px}
.woocommerce form .form-row label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:7px;color:var(--ink-soft)}
.woocommerce form .form-row .required{color:var(--red);border:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input.input-text,
.woocommerce table.shop_table input,
.woocommerce #order_review input[type=text]{
  width:100%;border:1px solid var(--line);padding:12px 14px;font-family:var(--sans);font-size:14px;
  outline:none;background:#fff;border-radius:0;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--ink)}
.woocommerce .select2-container--default .select2-selection--single{
  height:44px;border:1px solid var(--line);border-radius:0;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:14px}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  list-style:none;border:1px solid var(--line);border-left:3px solid var(--ink);
  background:var(--paper-2);padding:14px 18px;margin:0 0 20px;font-size:13.5px;border-radius:0;
}
.woocommerce-error{border-left-color:var(--red)}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{text-decoration:underline;font-weight:600}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;font-weight:600;padding:13px 26px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;transition:.25s var(--ease);cursor:pointer;line-height:1;
}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:#fff;color:var(--ink)}

/* quantity input — 46px, centered, no spinners */
.quantity .qty,.woocommerce .quantity .qty{
  width:46px;text-align:center;border:1px solid var(--line);padding:10px 4px;
  font-family:var(--sans);font-size:14px;background:#fff;-moz-appearance:textfield;appearance:textfield;
}
.quantity .qty::-webkit-outer-spin-button,.quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* payment box */
.woocommerce #payment,.woocommerce-checkout #payment{background:var(--paper-2);border:1px solid var(--line);border-radius:0;padding:6px 22px}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:18px 0}
.woocommerce #payment div.payment_box{background:#fff;border:1px solid var(--line);font-size:13px;color:var(--grey-2)}
.woocommerce #payment div.payment_box::before{border-bottom-color:#fff}
.woocommerce #payment .place-order{padding:18px 0}

/* star rating */
.woocommerce .star-rating{font-family:star;color:var(--ink);overflow:hidden;position:relative;height:1.2em;line-height:1.2;width:5.3em;letter-spacing:2px}
.woocommerce .star-rating::before{content:"\53\53\53\53\53";color:var(--line);float:left;top:0;left:0;position:absolute}
.woocommerce .star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}
.woocommerce .star-rating span::before{content:"\53\53\53\53\53";top:0;position:absolute;left:0;color:var(--ink)}
.woocommerce p.stars a{color:var(--ink)}

/* full-width flow page vertical rhythm (never inline on .wrap) */
.woopage{padding:44px 0 72px}

/* ============================================================
   2. SHOP / PLP  (reuses .card / .media / .pgrid from app.css)
   ============================================================ */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pgrid>li{list-style:none;margin:0;padding:0;min-width:0}
.pgrid .card{height:100%}
.pgrid .card .media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.woocommerce ul.products,.woocommerce-page ul.products{margin:0;padding:0}

.plp-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:56px 0;text-align:center}
.plp-hero .eyebrow{margin-bottom:14px}
.plp-hero h1{font-family:var(--serif);font-size:clamp(36px,5.4vw,64px);line-height:1.02}
.plp-hero p{color:var(--grey-2);max-width:560px;margin:16px auto 0}

/* WC result count + ordering bar */
.woocommerce .woocommerce-result-count{color:var(--grey-2);font-size:13px;margin:0}
.woocommerce .woocommerce-ordering select{border:1px solid var(--line);padding:9px 12px;font-family:var(--sans);font-size:12px;background:#fff;border-radius:0}
.anvya-shop-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:14px}

/* pagination */
.woocommerce nav.woocommerce-pagination{margin-top:44px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{display:inline-flex;border:1px solid var(--line);list-style:none;margin:0;padding:0}
.woocommerce nav.woocommerce-pagination ul li{border-right:1px solid var(--line)}
.woocommerce nav.woocommerce-pagination ul li:last-child{border-right:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{padding:12px 18px;font-size:12px;font-weight:600;color:var(--ink);display:block}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:#fff}

/* ============================================================
   3. PDP  (reuses .pdp gallery/info from app.css)
   ============================================================ */
.woocommerce div.product{margin:0}
.woocommerce div.product form.cart{margin:0}
.woocommerce div.product .woocommerce-product-gallery{opacity:1!important}
.pdp-gallery .woocommerce-product-gallery__wrapper{margin:0}
.pdp-gallery .woocommerce-product-gallery__image a{display:block}
.woocommerce div.product .stock{color:var(--grey-2);font-size:12px}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-size:22px;font-weight:600;font-family:var(--sans)}
.woocommerce div.product p.price del{color:var(--grey);font-weight:400;margin-right:8px}
.woocommerce div.product p.price ins{color:var(--red);text-decoration:none;font-weight:700}
.pdp-info form.cart .quantity{display:inline-flex;margin-right:12px}
.woocommerce div.product form.cart .button{min-width:180px}
.anvya-add-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0 14px}

/* related products grid uses .pgrid too */
.woocommerce .related>h2,.woocommerce .upsells>h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);margin-bottom:24px}

/* review block */
.woocommerce #reviews #comments ol.commentlist{margin:0;padding:0;list-style:none}
.woocommerce #reviews #comments ol.commentlist li{border:1px solid var(--line);padding:22px;margin-bottom:16px}
.woocommerce #reviews #comments ol.commentlist li .comment-text{margin:0}
.woocommerce #review_form_wrapper .comment-form{display:block}
.woocommerce #reviews .comment-reply-title{font-family:var(--serif);font-size:22px}

/* mobile sticky add-to-bag (reuses .sticky-buy from app.css) */

/* ============================================================
   4. CART  (custom .cartwrap card layout)
   ============================================================ */
.cartwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.cartwrap .cart-main{min-width:0}
.cartwrap .summary{min-width:0}
.citem{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:18px;align-items:center;
  border:1px solid var(--line);background:#fff;padding:16px;margin-bottom:16px}
.citem .ci-media{width:88px;height:110px;position:relative;overflow:hidden;border:1px solid var(--line)}
.citem .ci-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.citem .ci-body{min-width:0}
.citem .ci-name{font-family:var(--serif);font-size:19px;line-height:1.1}
.citem .ci-name a{color:var(--ink)}
.citem .ci-meta{font-size:11px;letter-spacing:.06em;color:var(--grey-2);text-transform:uppercase;margin-top:4px}
.citem .ci-price{font-size:14px;font-weight:600;margin-top:6px}
.citem .ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.citem .ci-remove{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2);border-bottom:1px solid var(--line);padding-bottom:2px}
.citem .ci-remove:hover{color:var(--red);border-color:var(--red)}
.cart-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.cart-coupon{display:flex;gap:10px;flex-wrap:wrap}
.cart-coupon input{border:1px solid var(--line);padding:12px 14px;font-family:var(--sans);font-size:13px;background:#fff;min-width:160px}

.summary.cart-collaterals{border:1px solid var(--line);background:var(--paper-2);padding:26px}
.summary .cart_totals{width:100%!important;float:none!important}
.summary h2{font-family:var(--serif);font-size:24px;margin-bottom:18px}
.summary table.shop_table{width:100%;border-collapse:collapse;font-size:14px}
.summary table.shop_table th,.summary table.shop_table td{padding:12px 0;border-bottom:1px solid var(--line);text-align:left}
.summary table.shop_table td{text-align:right}
.summary .order-total th,.summary .order-total td{font-weight:700;font-size:16px;border-bottom:none}
.summary .wc-proceed-to-checkout{margin-top:20px}
.summary .wc-proceed-to-checkout a.checkout-button{width:100%}
.summary .shipping-calculator-button{color:var(--ink);text-decoration:underline}

.cart-empty-wrap{max-width:560px;margin:0 auto;text-align:center;padding:40px 0 20px}
.cart-empty-wrap .serif{font-family:var(--serif);font-size:clamp(30px,4vw,46px);margin-bottom:14px}
.cart-empty-wrap p{color:var(--grey-2);margin-bottom:24px}

/* ============================================================
   5. CHECKOUT  (grid on default markup, per skill doc)
   ============================================================ */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:30px;align-items:start}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1/3;min-width:0}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0}
.woocommerce-checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:100px;min-width:0}
#order_review_heading{font-family:var(--serif);font-size:24px}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3{font-family:var(--serif);font-size:22px;margin:0 0 16px}
.woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.woocommerce-billing-fields__field-wrapper>.form-row{grid-column:1/-1}
.woocommerce-billing-fields__field-wrapper>.form-row-first{grid-column:1}
.woocommerce-billing-fields__field-wrapper>.form-row-last{grid-column:2}
.woocommerce-checkout #order_review table.shop_table{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--line);background:#fff}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total{text-align:right}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td{font-weight:700;font-size:16px}
.woocommerce-checkout #place_order{width:100%;margin-top:8px}
.anvya-checkout-trust{text-align:center;font-size:11px;letter-spacing:.08em;color:var(--grey-2);margin-top:14px}

@media(max-width:900px){
  .woocommerce-checkout form.checkout{display:block}
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{position:static;width:auto}
  .woocommerce-checkout #order_review{margin-top:26px}
}

/* ============================================================
   6. ACCOUNT  (scoped to logged-in so login page isn't squeezed)
   ============================================================ */
.logged-in.woocommerce-account .woocommerce{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--line)}
.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation ul li:last-child{border-bottom:none}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:14px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.woocommerce-MyAccount-navigation ul li.is-active a{background:var(--ink);color:#fff}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-family:var(--serif)}
.acc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:22px}
.acc-cards a{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:6px;transition:.25s var(--ease)}
.acc-cards a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.acc-cards a .ac-t{font-family:var(--serif);font-size:20px}
.acc-cards a .ac-d{font-size:12px;color:var(--grey-2)}
.acc-cards a:hover .ac-d{color:rgba(255,255,255,.7)}
.woocommerce table.account-orders-table{width:100%;border-collapse:collapse;font-size:13.5px}
.woocommerce table.account-orders-table th,.woocommerce table.account-orders-table td{border-bottom:1px solid var(--line);padding:12px;text-align:left}

/* branded auth (login / register) */
.anvya-auth{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);max-width:960px;margin:0 auto}
.anvya-auth .auth-panel{padding:clamp(26px,4vw,44px)}
.anvya-auth .auth-panel:first-child{border-right:1px solid var(--line)}
.anvya-auth h2{font-family:var(--serif);font-size:28px;margin-bottom:6px}
.anvya-auth .auth-sub{color:var(--grey-2);font-size:13.5px;margin-bottom:22px}
.woocommerce-account .show-password-input{display:none}
.woocommerce form.login,.woocommerce form.register{border:none;padding:0;margin:0}
.woocommerce-form-login__rememberme,.woocommerce-form-register__submit{margin-top:6px}
.woocommerce form .form-row .button{width:100%;margin-top:6px}

@media(max-width:1024px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .cartwrap{grid-template-columns:minmax(0,1fr)}
  .logged-in.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr)}
  .anvya-auth{grid-template-columns:1fr}
  .anvya-auth .auth-panel:first-child{border-right:none;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .pgrid{grid-template-columns:1fr}
  .citem{grid-template-columns:70px minmax(0,1fr);gap:14px}
  .citem .ci-right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}

/* MOBILE v2: shop grid = 2 in a row (override earlier 1fr) */
@media(max-width:600px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* FIX: cart-item image was 88px inside a 70px column → overflowed onto the
   product name/price. Match the column to the image + clear gap. */
@media(max-width:600px){
  .citem{grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:start}
  .citem .ci-media{width:84px;height:104px}
}