/* CSN Store — UX layer (2026-11-03). Paired with js/ux.js. */

/* Shimmer while an image loads (the image draws over it when ready) */
img.csn-img-loading{
  background:linear-gradient(100deg,var(--sand-50,#F3F1EC) 30%,var(--sand-100,#E9E6DE) 50%,var(--sand-50,#F3F1EC) 70%) 0 0/300% 100%;
  animation:csn-shimmer 1.2s ease-in-out infinite;
}
@keyframes csn-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Looping animations pause while their section is off screen (ux.js toggles the class) */
.csn-offscreen,.csn-offscreen *,.csn-offscreen *::before,.csn-offscreen *::after{animation-play-state:paused!important}

/* Slim bar at the top while the next page loads */
.csn-navbar{
  position:fixed;top:env(safe-area-inset-top,0px);left:0;z-index:10000;height:3px;width:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--accent,#2A9D8F),var(--brand,#E07A5F));
  box-shadow:0 0 8px color-mix(in srgb,var(--brand,#E07A5F) 55%,transparent);
  border-radius:0 3px 3px 0;
}
.csn-navbar.is-on{opacity:1;animation:csn-nav 8s cubic-bezier(.08,.7,.2,1) forwards}
@keyframes csn-nav{0%{width:0}15%{width:42%}45%{width:72%}100%{width:94%}}

/* Colour swatches replacing the variation dropdowns */
.csn-swatches{display:flex;flex-wrap:wrap;gap:8px}
.csn-swatch{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 8px;
  border:1.5px solid var(--border-strong,#D8D3C8);border-radius:999px;background:var(--surface-card,#fff);
  color:var(--text-primary,#222);font:500 15px/1.1 var(--font-body,inherit);cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;
}
.csn-swatch:not(:has(.csn-swatch-dot)){padding-left:16px}
.csn-swatch:hover{border-color:var(--brand,#E07A5F)}
.csn-swatch[aria-checked="true"]{border-color:var(--brand,#E07A5F);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand,#E07A5F) 22%,transparent);font-weight:600}
.csn-swatch:focus-visible{outline:2px solid var(--accent,#2A9D8F);outline-offset:2px}
.csn-swatch:disabled{opacity:.4;cursor:not-allowed}
.csn-swatch:disabled .csn-swatch-name{text-decoration:line-through}
.csn-swatch-dot{width:26px;height:26px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.16);box-shadow:inset 0 -3px 6px rgba(0,0,0,.12)}
.csn-swatch-dot.is-clear{background:repeating-conic-gradient(#d9d9d9 0 25%,#fff 0 50%) 0 0/10px 10px}
.csn-select-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}

@media (prefers-reduced-motion:no-preference){
  .csn-swatch:active{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  img.csn-img-loading{animation:none}
  .csn-navbar.is-on{animation:none;width:70%}
}

/* Accessibility contrast (2026-11-03): WooCommerce fades the old price to 50%, and the custom-order notice link is teal on pale teal */
.csn-product-wrap .summary .price del{opacity:1}
.csn-custom-order-notice a{color:var(--teal-600,#1A6960)!important}

/* ===== Conversion layer (2026-11-05, DECISIONS #30) ===== */

/* Home, phones: products come straight after the headline; the print bed stays on larger screens.
   This also stops its three non-GPU animations, which cost phones ~5 s of main-thread work. */
@media (max-width:768px){
  .csn-printbed{display:none}
  .csn-hero-grid > div:first-child > div:last-child{display:none!important}
  .csn-hero-grid .csn-cta-outline{display:none!important}
  main > .csn-cat-marquee{display:none}
}

/* Product page: title, price, choose, buy. Details and policy follow. */
.csn-product-wrap .summary{display:flex;flex-direction:column}
.csn-product-wrap .summary > *{order:20}
.csn-product-wrap .summary > .product_title{order:1}
.csn-product-wrap .summary > .woocommerce-product-rating{order:2}
.csn-product-wrap .summary > .price{order:3}
.csn-product-wrap .summary > form.cart{order:4}
.csn-product-wrap .summary > .csn-buybox{order:5}
.csn-product-wrap .summary > .woocommerce-product-details__short-description{order:6}
.csn-product-wrap .summary > div:has(> #shiprocket_pincode_check){order:7}
.csn-product-wrap .summary > #pincode_response{order:8}
.csn-product-wrap .summary > .csn-custom-order-notice{order:9}
.csn-product-wrap .summary > .csn-made-mini{order:10}
.csn-product-wrap .summary > .product_meta{order:11}
.csn-product-wrap .summary .product_meta .sku_wrapper{display:none}

/* A proper, thumb-sized Add to cart */
.csn-product-wrap form.cart .woocommerce-variation-add-to-cart,
.csn-product-wrap form.cart:not(.variations_form){display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.csn-product-wrap form.cart .csn-giftwrap-row{flex:1 1 100%}
.csn-product-wrap form.cart .single_add_to_cart_button{flex:1 1 150px;min-height:54px;font-size:17px!important;border-radius:14px}

/* Reassurance under the button */
.csn-buybox{display:grid;gap:9px;margin:14px 0 18px;padding:14px 16px;border:1px solid var(--border,#E9E6DE);border-radius:14px;background:var(--surface-card,#fff);font-size:14px;line-height:1.4;color:var(--text-secondary,#5C574F)}
.csn-buybox-row{display:flex;gap:10px;align-items:flex-start}
.csn-buybox-row svg{flex:none;margin-top:1px;color:var(--teal-600,#1A6960)}
.csn-buybox-row b{color:var(--ink,#141414);font-weight:600}
.csn-buybox-wa{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:3px;border:1.5px solid var(--teal-600,#1A6960);border-radius:12px;color:var(--teal-600,#1A6960)!important;font-family:var(--font-display,inherit);font-weight:600;font-size:14.5px;text-decoration:none!important}
.csn-buybox-wa:hover{background:var(--accent-soft,#E4F3F1)}

/* Phones: price + Add to cart stay on screen */
.csn-buybar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;align-items:center;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--surface-card,#fff);border-top:1px solid var(--border,#E9E6DE);box-shadow:0 -6px 20px rgba(20,20,20,.08)}
.csn-buybar.is-on{display:flex}
.csn-buybar-info{display:grid;gap:1px;min-width:0;flex:0 1 auto}
.csn-buybar-price{font-family:var(--font-display,inherit);font-weight:700;font-size:19px;color:var(--ink,#141414);white-space:nowrap}
.csn-buybar-opt{font-size:12.5px;color:var(--text-muted,#736D65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csn-buybar-btn{flex:1 1 auto;min-height:48px;border:0;border-radius:12px;background:var(--brand,#E07A5F)!important;color:#fff!important;font-family:var(--font-display,inherit);font-weight:700;font-size:16px;cursor:pointer}
.csn-buybar-btn:focus-visible{outline:2px solid var(--accent,#2A9D8F);outline-offset:2px}
body.csn-has-buybar .csn-whatsapp-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
@media (min-width:1025px){.csn-buybar{display:none!important}}

/* Free-shipping progress in cart and checkout */
.csn-ship-nudge{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--accent-soft,#E4F3F1);font-size:14.5px;line-height:1.4;color:var(--ink,#141414)}
.csn-ship-nudge-bar{height:6px;margin-top:8px;border-radius:99px;background:rgba(26,105,96,.16);overflow:hidden}
.csn-ship-nudge-bar i{display:block;height:100%;border-radius:99px;background:var(--teal-600,#1A6960)}

/* Checkout and cart forms in the brand's type and shapes */
.woocommerce-checkout .woocommerce form .form-row label,.woocommerce-checkout form.checkout label,.woocommerce-cart .woocommerce label{font-family:var(--font-body,inherit);font-weight:500;font-size:14px;color:var(--text-primary,#222)}
.woocommerce-checkout form.checkout h3,.woocommerce-checkout .woocommerce h3{font-family:var(--font-display,inherit);font-weight:700;font-size:20px;color:var(--ink,#141414)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.woocommerce-checkout .select2-container .select2-selection--single{min-height:48px;padding:11px 14px;border:1.5px solid var(--border-strong,#D8D3C8);border-radius:10px;background:var(--surface-card,#fff);font:400 16px/1.3 var(--font-body,inherit);color:var(--text-primary,#222)}
.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(--accent,#2A9D8F);box-shadow:0 0 0 3px var(--accent-soft,#E4F3F1)}
.woocommerce-checkout .woocommerce-info,.woocommerce-cart .woocommerce-info{padding:12px 14px 12px 42px;border:0;border-radius:12px;background:var(--surface-sunken,#F3F1EC);font-family:var(--font-body,inherit);font-size:14.5px;color:var(--text-primary,#222)}
.woocommerce-checkout .woocommerce-info::before,.woocommerce-cart .woocommerce-info::before{top:12px;left:14px;color:var(--text-muted,#736D65)}
.woocommerce-checkout #place_order{min-height:56px;font-family:var(--font-display,inherit);font-size:18px;font-weight:700;border-radius:14px}

/* Cart and checkout buttons: brand colour, not WooCommerce purple */
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.checkout-button,.woocommerce-checkout #place_order{background:var(--brand,#E07A5F)!important;color:#fff!important;border:0;border-radius:14px;font-family:var(--font-display,inherit);font-weight:700}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce a.checkout-button:hover,.woocommerce-checkout #place_order:hover{background:var(--brand-hover,#CB6145)!important}
.woocommerce-cart .woocommerce a.checkout-button{min-height:56px;display:flex;align-items:center;justify-content:center;font-size:18px}
.woocommerce-cart table.cart button.button,.woocommerce-cart table.cart input.button{border-radius:10px;font-family:var(--font-body,inherit)}

/* Product cards: old price small and grey, new price clear */
.csn-product-card del{display:block;font-size:13px;font-weight:400;color:var(--text-muted,#736D65);opacity:1}
.csn-product-card ins{text-decoration:none;background:none}

/* A preselected colour needs no Clear link; the WhatsApp bubble must not sit on checkout fields */
.csn-has-swatches .reset_variations{display:none!important}
@media (max-width:768px){.woocommerce-checkout .csn-whatsapp-float{display:none!important}}

/* The hidden <select> behind the swatches stays inside its cell (it was widening the desktop page) */
.csn-product-wrap table.variations td.value{position:relative}
.csn-product-wrap table.variations .csn-select-hidden{left:0!important;top:0!important;right:auto!important}

/* Guides and plain info pages (2026-11-05) */
.csn-guide{max-width:720px;margin:0 auto;color:var(--text-primary);font-size:17px;line-height:1.75}
.csn-guide-hub{max-width:880px}
.csn-guide h1{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,44px);line-height:1.15;color:var(--ink);margin:0 0 16px}
.csn-guide h2{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,3vw,26px);line-height:1.25;color:var(--ink);margin:38px 0 12px}
.csn-guide p{margin:0 0 16px}
.csn-guide ul,.csn-guide ol{margin:0 0 18px;padding-left:22px}
.csn-guide ul{list-style:disc}.csn-guide ol{list-style:decimal}
.csn-guide li{margin-bottom:9px}
.csn-guide a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.csn-guide a:hover{color:var(--link-hover)}
.csn-guide-crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.csn-guide .csn-guide-lead{font-size:19px;line-height:1.6;color:var(--text-secondary)}
.csn-guide-quick{margin:22px 0 8px;padding:18px 20px;border-radius:var(--radius-lg,16px);background:var(--accent-soft);border-left:4px solid var(--accent)}
.csn-guide-quick b{display:block;font-family:var(--font-display);margin-bottom:4px}
.csn-guide-quick p{margin:0}
.csn-guide-cta{margin:34px 0 8px;padding:18px 20px;border-radius:var(--radius-lg,16px);background:var(--brand-soft);border:1px solid var(--border)}
.csn-guide-table{overflow-x:auto;margin:0 0 18px}
.csn-guide table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.csn-guide th,.csn-guide td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.csn-guide th{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.csn-guide-meta{margin-top:30px;font-size:14px;color:var(--text-muted)}
.csn-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:26px 0}
.csn-guide a.csn-guide-card{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--radius-lg,16px);background:var(--surface-card);border:1px solid var(--border);text-decoration:none;color:var(--text-primary);transition:border-color .2s}
.csn-guide a.csn-guide-card:hover{border-color:var(--brand)}
.csn-guide-card span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.csn-guide-card strong{font-family:var(--font-display);font-size:18px;line-height:1.3;color:var(--ink)}
.csn-guide-card em{font-style:normal;font-size:15px;line-height:1.5;color:var(--text-secondary)}

/* Buttons: white text on a deeper terracotta, 4.5:1 and easy to read in sunlight (2026-11-05, DECISIONS #31).
   --brand stays the lighter terracotta for accents, logo and icons. The attribute selectors catch the
   buttons styled inline in the PHP templates (with a space once JS has touched the style). */
:root{--brand-cta:#C2553A;--brand-cta-hover:#A94E36}
[style*="background:var(--brand)"],[style*="background: var(--brand)"],.csn-offer-banner,.csn-product-wrap .single_add_to_cart_button,.csn-buybar-btn,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.checkout-button,
.woocommerce-checkout #place_order,.woocommerce-MyAccount-content button,.woocommerce-MyAccount-content input[type=submit],
.woocommerce-Button,.csn .csn-404-links a:first-child{background:var(--brand-cta)!important}
.csn .csn-404-links a:first-child{border-color:var(--brand-cta)}
[style*="background:var(--brand)"]:hover,.csn-product-wrap .single_add_to_cart_button:hover,.csn-buybar-btn:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,.csn-drawer-empty-cta:hover{background:var(--brand-cta-hover)!important}