/* ==========================================================================
KSAHK Farm Market — design tokens & full storefront redesign (Storefront)
Modern, clean, "farm-fresh" visual system applied across every page type:
Home, Products, Product Details, Cart, Checkout/Payment, Order Tracking,
Contact. Built on Storefront's real hook-driven markup.
========================================================================== */
:root{
--ksahk-green:#1b5e3b;
--ksahk-green-deep:#123f28;
--ksahk-green-light:#e2f0e6;
--ksahk-green-accent:#eef6f0;
--ksahk-orange:#d9701f;
--ksahk-orange-soft:#fbe4cd;
--ksahk-cream:#f8faf6;
--ksahk-ink:#1c2621;
--ksahk-ink-soft:#5c6b62;
--ksahk-line:#e0e8e3;
--ksahk-white:#ffffff;
/* fresh-fruit accent palette — used for badges & friendly touches, green stays the brand anchor */
--ksahk-mango:#ff9f1c;
--ksahk-mango-soft:#fff1dc;
--ksahk-watermelon:#f6416c;
--ksahk-watermelon-soft:#fde3e9;
--ksahk-banana:#ffd93d;
--ksahk-banana-soft:#fff8dc;
--ksahk-radius-sm:10px;
--ksahk-radius:16px;
--ksahk-card-radius:12px;
--ksahk-radius-lg:22px;
--ksahk-radius-pill:999px;
--ksahk-radius-header:24px;
--ksahk-shadow-sm:0 4px 14px -6px rgba(27,94,59,.14);
--ksahk-shadow:0 14px 32px -12px rgba(27,94,59,.18);
--ksahk-shadow-hover:0 24px 44px -14px rgba(27,94,59,.24);
--ksahk-shadow-lg:0 24px 50px -16px rgba(27,94,59,.22);
--ksahk-gap:14px;
--ksahk-lift:-6px;
--ksahk-header-h:86px;
}
/* ---- Base ---- */
*{box-sizing:border-box}
html{overflow-x:hidden;max-width:100%}
body{
font-family:'Noto Sans Khmer','Noto Sans',sans-serif;
background:var(--ksahk-cream);
color:var(--ksahk-ink);
font-size:16px;
line-height:1.65;
overflow-x:hidden;
max-width:100%;
}
h1,h2,h3,h4,h5,h6,.site-title,.entry-title{
font-family:'Noto Sans Khmer','Noto Sans',sans-serif;
color:var(--ksahk-ink);
}
img{max-width:100%;height:auto}
::selection{background:var(--ksahk-green-light);color:var(--ksahk-green-deep)}
/* Buttons / links reused across theme + WooCommerce */
a{color:var(--ksahk-green-deep)}
.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce-page a.button, .woocommerce-page button.button{
background-color:var(--ksahk-green) !important;
border-color:var(--ksahk-green) !important;
color:#fff !important;
border-radius:var(--ksahk-radius-pill);
font-weight:700;
transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
box-shadow:var(--ksahk-shadow-sm);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce input.button:hover,
.button:hover, button:hover{
background-color:var(--ksahk-green-deep) !important;
border-color:var(--ksahk-green-deep) !important;
transform:translateY(-2px);
box-shadow:var(--ksahk-shadow) !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
#place_order{
background-color:var(--ksahk-orange) !important;
border-color:var(--ksahk-orange) !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, #place_order:hover{
background-color:#b95c14 !important;
}
.woocommerce a.button.disabled, .woocommerce button.button.disabled{opacity:.5;box-shadow:none}
/* Price + sale badge (unscoped — must match everywhere ul.products/span.price appear) */
ins{background:transparent;text-decoration:none}
span.price{color:var(--ksahk-green-deep);font-weight:700}
span.onsale{
background:var(--ksahk-watermelon) !important;
border-radius:6px;
font-size:11px;
}
.star-rating{color:var(--ksahk-orange)}
/* Generic form fields used site-wide (checkout, contact, search) */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
input[type="password"],input[type="search"],select,textarea{
border:1px solid var(--ksahk-line) !important;
border-radius:var(--ksahk-radius-sm) !important;
padding:11px 12px !important;
font-family:inherit;
background:#fff;
transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
outline:none;
border-color:var(--ksahk-green) !important;
box-shadow:0 0 0 3px var(--ksahk-green-light);
}
/* ==========================================================================
HEADER v4 — single dark-green row: logo, nav, icon-only search/cart/account.
Real Storefront hooks, all merged into one flex row via functions.php
(container_close moved to the end so nothing splits into a second row).
========================================================================== */
.site-header{
background:var(--ksahk-green-deep);
position:sticky;top:0;z-index:200;
padding:0;
}
.site-header *{box-sizing:border-box}
.site-header .col-full{max-width:1400px;padding-left:24px;padding-right:24px}
/* min-height (not fixed top/bottom padding) is what the whole header hangs
off: every direct child is vertically centered by align-items:center
against this one number, so nothing needs its own top/margin nudge to
"look" centered — logo, nav, icon row and language switcher all read
their center from the same line. */
.site-header > .col-full{
display:flex;align-items:center;flex-wrap:wrap;gap:20px;
min-height:86px;
position:relative;
}
/* ---- Logo ---- */
.site-branding{margin:0;order:1;display:flex;align-items:center}
.site-title{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px;line-height:1}
.site-title a{color:#fff !important;text-decoration:none}
.site-description{color:rgba(255,255,255,.7);font-size:12px}
.custom-logo-link{display:flex;align-items:center}
/* display:block is the fix, not just the size bump: an inline ![]()
sits on
its text baseline and reads ~4px high of true-center against everything
else in the row, which is exactly the "logo looks off-center" symptom. */
.custom-logo-link img{
display:block;height:60px;max-height:60px;width:auto;
}
/* ---- Nav: uppercase, letter-spaced, right of logo ---- */
#site-navigation.main-navigation{background:transparent;display:flex;align-items:center;order:2;margin-left:32px;align-self:stretch}
#site-navigation.main-navigation .primary-navigation{display:flex;align-items:center}
#site-navigation.main-navigation .primary-navigation ul.menu{
display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;
}
#site-navigation.main-navigation .primary-navigation ul.menu > li > a{
display:flex;align-items:center;padding:10px 14px;color:rgba(255,255,255,.88) !important;font-weight:600;
font-size:16px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;line-height:1.2;
transition:color .15s ease;
}
#site-navigation.main-navigation .primary-navigation ul.menu > li > a:hover{color:#fff !important}
#site-navigation.main-navigation .primary-navigation ul.menu > li.current-menu-item > a,
#site-navigation.main-navigation .primary-navigation ul.menu > li.current_page_item > a,
#site-navigation.main-navigation .primary-navigation ul.menu > li.current-menu-ancestor > a,
#site-navigation.main-navigation .primary-navigation ul.menu > li.current-menu-parent > a,
#site-navigation.main-navigation .primary-navigation ul.menu > li.current_page_parent > a{
color:#fff !important;
font-weight:800;
background:rgba(255,255,255,.16);
border-radius:var(--ksahk-radius-pill);
}
/* Storefront's secondary "handheld" nav is a redundant fallback list for us — never show it */
.handheld-navigation{display:none !important}
/* ---- Right-side group: search / cart / account / language, one flex row
pushed to the far edge, so every item in it shares one cross-axis center
instead of each relying on its own order + margin-left:auto trick. ---- */
.header-actions{
display:flex;align-items:center;gap:10px;
order:3;margin-left:auto;
}
.site-search{position:relative}
#site-header-cart.site-header-cart{list-style:none;margin:0;padding:0;position:relative}
#site-header-cart.site-header-cart > li{list-style:none}
.ksahk-icon-btn,
.ksahk-header-account,
#site-header-cart .cart-contents,
.site-search .ksahk-search-toggle{
width:42px;height:42px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;color:#fff;
transition:background-color .15s ease;
cursor:pointer;
}
.ksahk-header-account:hover,
#site-header-cart .cart-contents:hover,
.site-search .ksahk-search-toggle:hover{background:rgba(255,255,255,.14)}
/* Search: real WC form, collapsed to an icon button that reveals the field */
.site-search .ksahk-search-toggle{
border:none;position:relative;z-index:1;
}
.site-search .ksahk-search-toggle::before{
content:'';width:18px;height:18px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.site-search .woocommerce-product-search{
position:absolute;top:calc(100% + 10px);right:0;z-index:5;
display:flex;align-items:center;
width:300px;max-width:calc(100vw - 48px);
background:#fff;border-radius:var(--ksahk-radius-header);
box-shadow:var(--ksahk-shadow);
overflow:hidden;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-search.ksahk-search-open .woocommerce-product-search{
opacity:1;visibility:visible;transform:translateY(0);
}
.site-search .woocommerce-product-search .search-field{
border:none !important;border-radius:0 !important;flex:1;min-width:0;
box-shadow:none !important;padding:12px 16px !important;color:var(--ksahk-ink);
}
.site-search .woocommerce-product-search button{
border:none;background:transparent !important;color:var(--ksahk-green) !important;
box-shadow:none !important;padding:10px 16px !important;font-weight:700;font-size:13px;
}
/* Cart icon + small count badge (shown only when the cart has items) */
#site-header-cart .cart-contents{position:relative}
#site-header-cart .cart-contents::before{
content:'';width:19px;height:19px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-1.5 9h-12z'/%3E%3Cpath d='M6 6 4.7 3H2'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E");
}
#site-header-cart .cart-contents .count{
position:absolute;top:-3px;right:-3px;
min-width:16px;height:16px;padding:0 3px;
background:var(--ksahk-watermelon);color:#fff !important;
border-radius:999px;font-size:10px;font-weight:800;line-height:16px;text-align:center;
font-family:inherit;
}
#site-header-cart .widget_shopping_cart{
position:absolute;top:calc(100% + 10px);right:0;z-index:5;
width:320px;max-width:calc(100vw - 48px);
background:#fff;border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow);
padding:16px;color:var(--ksahk-ink);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
#site-header-cart.site-header-cart:hover .widget_shopping_cart,
#site-header-cart.site-header-cart:focus-within .widget_shopping_cart{
opacity:1;visibility:visible;transform:translateY(0);
}
/* ---- Account icon ---- */
.ksahk-header-account{
text-decoration:none;
}
.ksahk-header-account::before{
content:'';width:18px;height:18px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}
/* ---- Language switcher (Polylang): a segmented pill/tab track, not two
separate floating pills — same 42px height as the icon buttons beside it,
so its center-line matches theirs exactly instead of hugging the top of
its own row (which is what a bare `align-items:center` on the alone
was doing here before: it centered the - s as a group, but never gave
each a height to actually center ITS OWN content against). Explicit
height:100% on both li and a closes that gap. ---- */
.ksahk-lang-switcher{
list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:3px;
height:42px;box-sizing:border-box;
background:rgba(255,255,255,.1);
border-radius:999px;
}
.ksahk-lang-switcher li{list-style:none;height:100%}
.ksahk-lang-switcher a{
display:inline-flex;align-items:center;justify-content:center;gap:5px;
height:100%;box-sizing:border-box;
padding:0 12px;border-radius:999px;
color:rgba(255,255,255,.75);text-decoration:none;
font-size:12px;font-weight:700;letter-spacing:.3px;
transition:background-color .15s ease,color .15s ease;
}
.ksahk-lang-switcher a:hover{color:#fff}
.ksahk-lang-switcher li.current-lang a{color:var(--ksahk-green-deep);background:#fff}
.ksahk-lang-switcher img{width:14px;height:14px;object-fit:cover;border-radius:2px;display:block;flex:0 0 auto}
/* ---- Hamburger (mobile only) ---- */
.menu-toggle{
display:none;
background:transparent !important;border:none !important;
font-weight:700;font-size:0;padding:0 !important;
width:42px;height:42px;border-radius:50%;order:0;
align-items:center;justify-content:center;cursor:pointer;
}
.menu-toggle::before{
font-size:0 !important;
content:'';display:block;width:19px;height:13px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}
.menu-toggle:hover{background:rgba(255,255,255,.14) !important}
/* ---- Tablet (768–1023px): tighten spacing, keep single row, logo/controls
stay vertically centered — only spacing changes, no repositioning. ---- */
@media (max-width:1023px){
.site-header .col-full{padding-left:16px;padding-right:16px}
:root{--ksahk-header-h:78px}
.site-header > .col-full{min-height:78px}
.custom-logo-link img{height:50px;max-height:50px}
#site-navigation.main-navigation{margin-left:20px}
#site-navigation.main-navigation .primary-navigation ul.menu{gap:0}
#site-navigation.main-navigation .primary-navigation ul.menu > li > a{padding:10px 9px;font-size:14px}
.header-actions{gap:6px}
}
/* ---- Mobile (<768px): hamburger left, logo, icons; nav becomes a
slide-down drawer opened by the hamburger. Height still comes from
min-height, never from a hand-picked top/bottom padding. ---- */
@media (max-width:767px){
:root{--ksahk-header-h:64px}
.site-header > .col-full{min-height:64px;gap:8px}
.custom-logo-link img{height:40px;max-height:40px}
.menu-toggle{display:flex;order:0}
/* flex-grow:0 (not the old :1) — .header-actions already has its own
margin-left:auto to reach the right edge. If both this AND that try to
claim the row's free space, flex resolves this one first and leaves
nothing for header-actions, which then has no room left on the line
and wraps under the logo instead of sitting beside it. */
.site-branding{order:1;flex:0 1 auto}
#site-navigation.main-navigation{
order:6;margin-left:0;flex:0 0 100%;display:block;align-self:auto;
}
#site-navigation.main-navigation .primary-navigation{
max-height:0;overflow:hidden;opacity:0;
transition:max-height .25s ease, opacity .2s ease;
background:var(--ksahk-green-deep);
}
#site-navigation.main-navigation.toggled .primary-navigation{
max-height:400px;opacity:1;
}
#site-navigation.main-navigation .primary-navigation ul.menu{
flex-direction:column;align-items:stretch;gap:0;padding:4px 4px 14px;
}
#site-navigation.main-navigation .primary-navigation ul.menu > li > a{
padding:13px 8px;border-top:1px solid rgba(255,255,255,.12);
}
/* Tighten the whole action row so hamburger + logo + icons + language
switcher all fit on one line even on a narrow phone — verified against
an actual 412px viewport (menuToggle 42 + gap 8 + logo ~60 + gap 8 +
header-actions ~244 = ~362px, comfortably inside a 380px content
width), not just eyeballed. */
.header-actions{gap:4px}
.ksahk-icon-btn,
.ksahk-header-account,
#site-header-cart .cart-contents,
.site-search .ksahk-search-toggle{width:38px;height:38px}
.ksahk-lang-switcher{height:38px}
.ksahk-lang-switcher a{padding:0 8px}
.site-search .woocommerce-product-search,
#site-header-cart .widget_shopping_cart{right:-8px}
}
@media (min-width:768px){
.menu-toggle{display:none !important}
}
@media (max-width:380px){
.site-header > .col-full{gap:6px}
.site-title{font-size:16px}
.custom-logo-link img{height:36px;max-height:36px}
.ksahk-header-account,
#site-header-cart .cart-contents,
.site-search .ksahk-search-toggle,
.menu-toggle{width:34px;height:34px}
.ksahk-lang-switcher{height:34px;padding:2px}
.ksahk-lang-switcher a{padding:0 8px;font-size:11px}
}
/* ==========================================================================
FOOTER — Storefront's hook-driven #colophon, our own credit/links row
========================================================================== */
#colophon.site-footer{background:var(--ksahk-green-deep);color:#f1f7ee;margin-top:48px;padding:0}
#colophon.site-footer .col-full{padding:48px 20px 20px;max-width:1360px}
.ksahk-footer-grid{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;
padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:18px;
}
.ksahk-footer-col h3{color:#fff;font-size:14px;font-weight:800;margin:0 0 14px;text-transform:uppercase;letter-spacing:.3px}
.ksahk-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ksahk-footer-col a{color:#dcebd6;text-decoration:none;font-size:13.5px}
.ksahk-footer-col a:hover{color:#fff;text-decoration:underline}
.ksahk-footer-about .ksahk-footer-brand{color:#fff;font-size:19px;font-weight:800;display:block;margin-bottom:10px}
.ksahk-footer-about p{color:#cfe0c8;font-size:13.5px;line-height:1.7;margin:0 0 16px;max-width:320px}
.ksahk-footer-social{display:flex;gap:10px}
.ksahk-social-icon{
width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);
display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s ease;
}
.ksahk-social-icon:hover{background:var(--ksahk-green)}
.ksahk-social-telegram::before{
content:'';width:17px;height:17px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21.9 4.6 18.6 20c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.3-4.9L17.6 7c.4-.4-.1-.6-.6-.2L8.1 12.5l-4.8-1.5c-1-.3-1-1 .2-1.5L20.5 3.6c.8-.3 1.6.2 1.4 1z'/%3E%3C/svg%3E");
}
.ksahk-footer-contact{gap:12px}
.ksahk-footer-contact li{display:flex;align-items:flex-start;gap:10px;color:#dcebd6;font-size:13.5px}
.ksahk-footer-ic{width:16px;height:16px;flex:0 0 auto;margin-top:2px;display:inline-block;
background:no-repeat center/contain;
}
.ksahk-ic-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcebd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .7 3a2 2 0 0 1-.4 2.1L8 10.2a16 16 0 0 0 6 6l1.4-1.4a2 2 0 0 1 2-.4c1 .3 2 .5 3 .7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.ksahk-ic-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcebd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E")}
.ksahk-ic-pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcebd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.ksahk-footer-credit{margin:0;color:#a9c4b3;font-size:12px}
.ksahk-footer-credit a{color:#a9c4b3 !important}
@media (max-width:900px){
.ksahk-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.ksahk-footer-about{grid-column:1 / -1}
}
@media (max-width:520px){
.ksahk-footer-grid{grid-template-columns:1fr}
}
/* ==========================================================================
PRODUCTS — shop grid & product cards (Home + Shop archive + related)
Standard WooCommerce markup: ul.products > li.product
========================================================================== */
ul.products{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:var(--ksahk-gap);
margin:0 0 8px !important;
padding:0;
}
/* WooCommerce's own CSS puts a clearfix (content:" ";display:table) on
ul.products::before/::after for its legacy float-based grid. A pseudo
element with real content still becomes an actual grid item, so it was
silently eating row 1's first cell and shifting every product over by
one slot. Not needed at all under CSS Grid — kill it. */
ul.products::before,
ul.products::after{
content:none !important;
display:none !important;
}
/* Homepage sections: force exactly 3 cards per row (shop archive stays flexible above) */
.ksahk-section ul.products{
grid-template-columns:repeat(3,1fr) !important;
}
@media (max-width:760px){
.ksahk-section ul.products{grid-template-columns:repeat(2,1fr) !important}
}
/* 359 (not 480) so 2 columns survive on every mainstream phone including a
360px Galaxy S8+/A-series and a 375px iPhone SE — not just 390px+ — and so
the homepage agrees with the shop grid, which used to split a full column
apart anywhere in the 360-480px band. */
@media (max-width:359px){
.ksahk-section ul.products{grid-template-columns:1fr !important}
}
/* NOTE ON THE DOUBLED SELECTORS THROUGHOUT THIS CARD BLOCK
WooCommerce core ships its own card rules at a HIGHER specificity than a
bare `ul.products li.product ...`, e.g.
woocommerce-layout.css: .woocommerce ul.products li.product{padding:0}
woocommerce.css: .woocommerce ul.products li.product a img{height:auto}
woocommerce.css: .woocommerce ul.products li.product a.woocommerce-loop-product__link{display:block}
woocommerce.css: .woocommerce ul.products li.product .woocommerce-loop-product__title{padding:.5em 0;font-size:1em}
woocommerce.css: .woocommerce ul.products li.product .price{font-size:.857em;margin-bottom:.5em}
The shop archive's carries the `woocommerce` class, so on THAT page
core was silently winning every one of those and the card rendered nothing
like this file describes (0 padding, a 359px tall auto-height image, a
non-flex link, core typography). The homepage has no `woocommerce` body
class, so the same rules DID apply there — which is why the two pages
disagreed. Repeating each selector with a `.woocommerce` prefix ties core's
specificity, and since custom.css is enqueued after woocommerce.css, ours
wins on order. The list-view overrides further down carry more classes
still, so they continue to beat both. */
ul.products li.product,
.woocommerce ul.products li.product{
width:100% !important;
margin:0 !important;
float:none !important;
clear:none !important;
background:#fff;
border:none;
border-radius:var(--ksahk-card-radius);
padding:12px;
text-align:left !important;
box-shadow:var(--ksahk-shadow-sm);
transition:box-shadow .3s ease, transform .3s ease;
position:relative;
display:flex;
flex-direction:column;
height:100%;
}
ul.products li.product:hover{
box-shadow:var(--ksahk-shadow-hover);
transform:translateY(var(--ksahk-lift));
}
/* The image (+ badge + fav/quick-view icons) is pulled out to the card's
true outer edge on three sides — a negative margin equal to the card's
own padding — so the photo reads as "filling the top of the card" with
rounded top corners flush against the card shape, while overflow:hidden
on this same box is what guarantees the hover zoom below can NEVER show
past the card boundary: since the image is now exactly as wide as this
clipping box, any scale > 1 gets cut off right at the card's edge. */
ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1;
position:relative;
margin:-12px -12px 0;
width:calc(100% + 24px);
overflow:hidden;
border-radius:var(--ksahk-card-radius) var(--ksahk-card-radius) 0 0;
}
ul.products li.product img,
.woocommerce ul.products li.product a img{
display:block;width:100%;height:195px;
object-fit:contain;
background:#f7f9f6;
margin:0 0 10px !important;
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
ul.products li.product:hover img{transform:scale(1.05)}
/* padding:0 is deliberate — it neutralises core's .5em vertical padding on the
title so the reserved two-line block is exactly min-height, nothing more. */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size:15px;font-weight:600;margin:0 12px 6px;padding:0;color:var(--ksahk-ink);
white-space:normal;overflow-wrap:break-word;word-break:break-word;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2.8em;line-height:1.4;
}
/* No margin-top:auto here: the name/price group sits directly under the image,
and the link's flex:1 absorbs the slack, which is what keeps the button
pinned to the bottom edge of every card regardless of title length. */
ul.products li.product .price,
.woocommerce ul.products li.product .price{
font-size:17px;font-weight:800;color:var(--ksahk-green-deep);
display:block;margin:0 12px 8px;line-height:1.2;
}
ul.products li.product .price del{color:var(--ksahk-ink-soft);opacity:.65;font-weight:400;font-size:14px;margin-right:6px}
ul.products li.product .price ins{font-weight:800;text-decoration:none}
ul.products li.product .ksahk-unit-suffix{font-size:12px;font-weight:400;color:var(--ksahk-ink-soft);margin-left:3px}
ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating{margin:0 12px 5px;font-size:11px}
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.added_to_cart{
display:flex !important;
align-items:center;justify-content:center;gap:6px;
width:100%;
min-height:40px;
box-sizing:border-box;
text-align:center;
margin-top:0 !important;
font-size:13px !important;
line-height:1.2 !important;
font-weight:700 !important;
padding:9px 12px !important;
background:var(--ksahk-green) !important;
color:#fff !important;
border:none !important;
border-radius:8px !important;
text-transform:none;
letter-spacing:normal;
box-shadow:var(--ksahk-shadow-sm) !important;
transition:background-color .2s ease, filter .2s ease, transform .18s ease, box-shadow .2s ease;
}
ul.products li.product .button:hover,
ul.products li.product a.add_to_cart_button:hover{
filter:brightness(1.14);
transform:translateY(-2px);
box-shadow:var(--ksahk-shadow) !important;
}
ul.products li.product .button:active,
ul.products li.product a.add_to_cart_button:active{
transform:translateY(0);
filter:brightness(.96);
}
/* Success state: WooCommerce's own add-to-cart script adds the ".added"
class to this exact button on a successful ajax add — no custom JS
needed to trigger it. We just swap which inner span is visible, so the
button keeps its size/position (min-height above) and never jumps. */
ul.products li.product a.add_to_cart_button .ksahk-btn-success{
display:none;align-items:center;justify-content:center;gap:6px;
}
ul.products li.product a.add_to_cart_button .ksahk-btn-success svg{flex:0 0 auto}
ul.products li.product a.add_to_cart_button.added .ksahk-btn-label{display:none}
ul.products li.product a.add_to_cart_button.added .ksahk-btn-success{display:inline-flex}
ul.products li.product a.add_to_cart_button.added{
background:var(--ksahk-green-deep) !important;
/* Leave room on the right for the compact "View cart" button below —
it sits beside this one, not below it, so the card's height (and
therefore the whole grid row's height) never changes on success. */
width:calc(100% - 96px) !important;
}
/* WooCommerce's own core CSS appends a second checkmark glyph via its icon
font on any ".added" button (.added::after{content:"\e017"}) — kill it,
we already show our own checkmark svg in .ksahk-btn-success. */
ul.products li.product a.add_to_cart_button.added::after{
content:none !important;
}
/* The "View cart" link WooCommerce inserts right after a successful add.
Taken out of normal flow (position:absolute) and docked beside the
success button at the same bottom edge, instead of stacking below it —
so the card never grows taller and the whole grid row stays put. */
ul.products li.product a.added_to_cart{
position:absolute;
right:12px;
bottom:12px;
width:88px;
min-height:40px;
padding:9px 6px !important;
font-size:12px !important;
background:#fff !important;
color:var(--ksahk-green-deep) !important;
border:1.5px solid var(--ksahk-green) !important;
box-shadow:var(--ksahk-shadow-sm) !important;
margin-top:0 !important;
animation:ksahkPopIn .3s cubic-bezier(.16,1,.3,1) both;
z-index:2;
}
ul.products li.product a.added_to_cart:hover{
background:var(--ksahk-green-light) !important;
filter:none;
transform:translateY(-2px);
}
@keyframes ksahkPopIn{
from{opacity:0;transform:translateX(8px) scale(.94)}
to{opacity:1;transform:translateX(0) scale(1)}
}
/* ==========================================================================
COMPACT CARD — responsive steps
Scoped to `ul.products li.product`, NOT to .ksahk-shop-main / .ksahk-section,
so related-products and cart cross-sell loops (which carry neither wrapper
class) shrink with everything else instead of staying desktop-sized.
Card padding P is the hub value: whenever P changes, the image bleed
(margin:-P; width:calc(100% + 2P)), the title/price/rating re-inset
(margin:... P ...) and the absolutely-positioned View-cart button
(right/bottom:P) must all move with it in the SAME block.
========================================================================== */
/* Tablet + the 1024-1160px band, where the 260px sidebar is still present and
the shop card is at its narrowest anywhere on the site (~215px at 1024). */
@media (max-width:1160px){
ul.products li.product img,
.woocommerce ul.products li.product a img{height:175px}
}
/* Below 1023px the filter sidebar becomes a drawer and cards get wider again,
but this is touch territory, so keep the image in the tablet band. */
@media (max-width:1023px){
:root{--ksahk-gap:12px}
ul.products li.product img,
.woocommerce ul.products li.product a img{height:170px}
}
/* Phones. Padding steps 12 -> 10, so every coupled value steps with it. */
@media (max-width:640px){
:root{--ksahk-gap:10px}
ul.products li.product,
.woocommerce ul.products li.product{padding:10px}
ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
margin:-10px -10px 0;
width:calc(100% + 20px);
}
ul.products li.product img,
.woocommerce ul.products li.product a img{height:145px;margin:0 0 8px !important}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size:14px;margin:0 10px 5px;
}
ul.products li.product .price,
.woocommerce ul.products li.product .price{font-size:15.5px;margin:0 10px 7px}
ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating{margin:0 10px 4px}
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.added_to_cart{
min-height:38px;
font-size:12px !important;
padding:8px 10px !important;
}
/* On a 2-column phone card there is no room for a text "View cart" beside
the success button — collapse it to an icon-only pill and move the
success button's width math with it (40 + 8 gutter = 48). */
ul.products li.product a.added_to_cart{
right:10px;bottom:10px;
width:40px;
padding:8px 0 !important;
font-size:0 !important;
}
ul.products li.product a.added_to_cart::before{
content:'';width:16px;height:16px;flex:0 0 auto;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
ul.products li.product a.add_to_cart_button.added{width:calc(100% - 48px) !important}
/* The badge stack would otherwise cover a 145px photo. */
ul.products li.product span.onsale,
.ksahk-badge{padding:4px 7px;font-size:9.5px}
}
/* Ultra-narrow phones — the tightest step. */
@media (max-width:380px){
:root{--ksahk-gap:8px}
ul.products li.product,
.woocommerce ul.products li.product{padding:8px}
ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
margin:-8px -8px 0;
width:calc(100% + 16px);
}
ul.products li.product img,
.woocommerce ul.products li.product a img{height:130px}
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{margin:0 8px 4px}
ul.products li.product .price,
.woocommerce ul.products li.product .price{margin:0 8px 6px}
ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating{margin:0 8px 4px}
ul.products li.product a.added_to_cart{right:8px;bottom:8px}
}
ul.products li.product span.onsale,
.ksahk-badge{
position:absolute;top:10px;left:10px;z-index:2;
min-width:auto;height:auto;line-height:1;
padding:6px 10px;font-weight:700;font-size:10.5px;
border-radius:4px;
text-transform:uppercase;letter-spacing:.3px;
}
ul.products li.product span.onsale{top:10px;left:10px}
.ksahk-badge-organic{background:var(--ksahk-green);color:#fff}
.ksahk-badge-new{background:var(--ksahk-banana);color:var(--ksahk-ink)}
/* if a Sale badge is already showing, push the organic/new tag below it */
ul.products li.product span.onsale ~ .ksahk-badge{top:40px}
.ksahk-unit-suffix{font-size:11.5px;font-weight:400;color:var(--ksahk-ink-soft)}
.woocommerce-result-count,.woocommerce-ordering{font-size:13px;color:var(--ksahk-ink-soft)}
.woocommerce-ordering select{padding:8px 10px !important}
/* Pagination */
.woocommerce nav.woocommerce-pagination{margin:36px 0 8px;display:flex;justify-content:center}
.woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:8px;list-style:none;margin:0;padding:0}
.woocommerce nav.woocommerce-pagination ul li{border:none !important;list-style:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 10px !important;
border:1px solid var(--ksahk-line) !important;
border-radius:var(--ksahk-radius-pill) !important;
color:var(--ksahk-ink) !important;font-weight:600;font-size:14px;
transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
background:var(--ksahk-green) !important;color:#fff !important;border-color:var(--ksahk-green) !important;
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev{font-size:0}
.woocommerce nav.woocommerce-pagination ul li a.next::after,
.woocommerce nav.woocommerce-pagination ul li a.prev::before{
content:'';width:14px;height:14px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2621' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.woocommerce nav.woocommerce-pagination ul li a.prev::before{transform:scaleX(-1)}
.woocommerce nav.woocommerce-pagination ul li a.next:hover::after,
.woocommerce nav.woocommerce-pagination ul li a.prev:hover::before{
filter:brightness(0) invert(1);
}
/* ==========================================================================
SHOP PAGE — page header, toolbar, filter sidebar, card action icons,
quick-view modal, add-to-cart toast. woocommerce/archive-product.php.
========================================================================== */
.ksahk-shop-page{max-width:1360px;margin:0 auto;padding:32px 24px 64px}
.ksahk-shop-header{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ksahk-line)}
.ksahk-breadcrumb{font-size:12.5px;color:var(--ksahk-ink-soft);margin-bottom:10px}
.ksahk-breadcrumb a{color:var(--ksahk-ink-soft);text-decoration:none}
.ksahk-breadcrumb a:hover{color:var(--ksahk-green-deep);text-decoration:underline}
.ksahk-crumb-sep{margin:0 8px;color:var(--ksahk-line)}
.ksahk-shop-title{font-size:30px;font-weight:800;margin:0 0 6px;color:var(--ksahk-ink)}
.ksahk-shop-sub{margin:0;color:var(--ksahk-ink-soft);font-size:14.5px}
.ksahk-shop-count{margin-left:10px;padding-left:10px;border-left:1px solid var(--ksahk-line);font-weight:600;color:var(--ksahk-green-deep)}
.ksahk-filter-toggle{
display:none;align-items:center;gap:8px;
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-pill);
padding:10px 18px;font-weight:700;font-size:13.5px;color:var(--ksahk-ink);
margin-bottom:16px;cursor:pointer;
}
.ksahk-filter-toggle-icon{
width:16px;height:16px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123f28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3'/%3E%3C/svg%3E");
}
.ksahk-shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
/* position:fixed (not just display:none) so this can never occupy a grid
cell in .ksahk-shop-layout regardless of display-value cascade order —
it's only ever meant to be a full-viewport mobile drawer backdrop. */
.ksahk-shop-filters-backdrop{display:none;position:fixed;inset:0}
.ksahk-shop-filters-inner{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
padding:22px;position:sticky;top:88px;
}
.ksahk-filters-head{display:none;justify-content:space-between;align-items:center;margin-bottom:16px}
.ksahk-filters-head h2{font-size:16px;font-weight:800;margin:0}
.ksahk-filter-close{background:none;border:none;font-size:26px;line-height:1;color:var(--ksahk-ink);cursor:pointer}
.ksahk-filter-group{padding:16px 0;border-top:1px solid var(--ksahk-line)}
.ksahk-filter-group:first-child{padding-top:0;border-top:none}
.ksahk-filter-group h3{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin:0 0 12px;color:var(--ksahk-ink)}
.ksahk-filter-group .widget_product_categories ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ksahk-filter-group .widget_product_categories li a{color:var(--ksahk-ink-soft);text-decoration:none;font-size:13.5px}
.ksahk-filter-group .widget_product_categories li a:hover{color:var(--ksahk-green-deep)}
.ksahk-filter-group .widget_product_categories li.chosen > a{color:var(--ksahk-green);font-weight:700}
.ksahk-filter-group .widget_product_categories .count{color:var(--ksahk-ink-soft);font-size:11.5px}
.ksahk-filter-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ksahk-filter-links a{color:var(--ksahk-ink-soft);text-decoration:none;font-size:13.5px}
.ksahk-filter-links a:hover{color:var(--ksahk-green-deep)}
.ksahk-filter-group .price_slider_amount .button{width:100%;padding:9px !important;font-size:12px !important}
/* Price Filter widget's jQuery UI slider — recolor from the default purple/blue to our green */
.ksahk-filter-group .price_slider{margin-bottom:16px}
.ksahk-filter-group .ui-slider{
position:relative;height:5px;background:var(--ksahk-line);border-radius:999px;border:none;
}
.ksahk-filter-group .ui-slider .ui-slider-range{
position:absolute;height:100%;background:var(--ksahk-green);border-radius:999px;
}
.ksahk-filter-group .ui-slider .ui-slider-handle{
position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;margin-left:-8px;
background:#fff;border:2.5px solid var(--ksahk-green);border-radius:50%;
cursor:pointer;outline:none;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-filter-group .ui-slider .ui-slider-handle:hover,
.ksahk-filter-group .ui-slider .ui-slider-handle:focus{background:var(--ksahk-green-light)}
.ksahk-filter-group .price_slider_amount{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ksahk-filter-group .price_slider_amount .price_label{font-size:12.5px;color:var(--ksahk-ink-soft);order:1}
.ksahk-filter-group .price_slider_amount .button{width:auto;order:2;padding:8px 16px !important}
.ksahk-shop-toolbar{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--ksahk-line);
}
.ksahk-shop-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* WooCommerce ships .woocommerce-result-count and .woocommerce-ordering with
margin:0 0 1em. In a centred flex row that trailing margin is part of the
item's box, so each one gets centred together with the invisible 1em beneath
it and its visible content ends up sitting above the row's true middle —
while the view-toggle buttons, which carry no margin, sit correctly. The
row's own gap handles the spacing these margins were meant for. */
.ksahk-shop-toolbar .woocommerce-result-count,
.ksahk-shop-toolbar .woocommerce-ordering{margin:0}
.ksahk-cat-quickselect,
.ksahk-shop-toolbar-right .woocommerce-ordering select{
border:1px solid var(--ksahk-line) !important;border-radius:var(--ksahk-radius-sm) !important;
padding:9px 12px !important;font-size:13px !important;background:#fff;color:var(--ksahk-ink);
}
.ksahk-view-toggle{display:flex;gap:4px;background:#f0f3ef;border-radius:var(--ksahk-radius-sm);padding:4px}
.ksahk-view-btn{
width:32px;height:32px;border:none;border-radius:6px;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
}
.ksahk-view-btn::before{content:'';width:16px;height:16px;background:no-repeat center/contain;opacity:.6}
.ksahk-view-btn[data-view="grid"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2621' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")}
.ksahk-view-btn[data-view="list"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2621' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E")}
.ksahk-view-btn.is-active{background:#fff;box-shadow:var(--ksahk-shadow-sm)}
.ksahk-view-btn.is-active::before{opacity:1}
/* Shop grid: a strict, consistent 3 columns on desktop at every width —
matches the homepage product sections (same content-product.php card,
same column count), so every row of 12 lines up 3/3/3/3 instead of 4/4/4. */
.ksahk-shop-main ul.products{grid-template-columns:repeat(3,1fr) !important}
@media (max-width:760px){
.ksahk-shop-main ul.products{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:359px){
.ksahk-shop-main ul.products{grid-template-columns:1fr !important}
}
/* List view */
.ksahk-shop-main ul.products.ksahk-view-list{grid-template-columns:1fr !important}
.ksahk-shop-main ul.products.ksahk-view-list li.product{
/* Same trap as the link below: the base card rule sets
flex-direction:column and this rule never re-declared it, so the
card kept stacking its image-block / buttons vertically here. */
display:flex;flex-direction:row;align-items:center;gap:20px;padding:14px;
}
.ksahk-shop-main ul.products.ksahk-view-list li.product a.woocommerce-loop-product__link{
/* The base (grid) rule for this element sets flex-direction:column —
that's a property this list-view rule never used to override, so it
silently won even here (higher specificity doesn't help when the
property is never re-declared), leaving image/title/price stacked
and centered instead of laid out as a row. Explicit row fixes it. */
display:flex;flex-direction:row;align-items:center;gap:20px;flex:1;min-width:0;
margin:0;width:auto;overflow:visible;border-radius:0;
}
.ksahk-shop-main ul.products.ksahk-view-list li.product img{width:110px;height:110px;flex:0 0 auto;margin:0 !important;border-radius:var(--ksahk-radius-sm)}
.ksahk-shop-main ul.products.ksahk-view-list li.product .woocommerce-loop-product__title{min-height:0;-webkit-line-clamp:1;margin:0;flex:1;min-width:0}
.ksahk-shop-main ul.products.ksahk-view-list li.product .price{margin:0;flex:0 0 auto;white-space:nowrap}
.ksahk-shop-main ul.products.ksahk-view-list li.product .button{width:auto;flex:0 0 auto;margin-top:0;padding:10px 20px !important}
.ksahk-shop-main ul.products.ksahk-view-list li.product .ksahk-card-actions{position:static;display:flex;margin-left:auto}
/* Success state in list view: the grid card's version docks "View cart"
with position:absolute beside a shrunk button, which only makes sense
against the grid card's own bottom-right corner. In this row layout the
two buttons should just sit inline next to each other instead. */
.ksahk-shop-main ul.products.ksahk-view-list li.product a.add_to_cart_button.added{
width:auto !important;
}
.ksahk-shop-main ul.products.ksahk-view-list li.product a.added_to_cart{
position:static;
width:auto;
flex:0 0 auto;
margin-left:8px !important;
padding:10px 16px !important;
font-size:13px !important;
}
.ksahk-shop-empty{
text-align:center;padding:64px 20px;background:#fff;border:1px dashed var(--ksahk-line);
border-radius:var(--ksahk-radius);color:var(--ksahk-ink-soft);
}
.ksahk-shop-empty-icon{color:var(--ksahk-line);margin-bottom:16px}
.ksahk-shop-empty h2{color:var(--ksahk-ink);font-size:19px;margin:0 0 8px}
.ksahk-shop-empty p{margin:0 0 20px}
/* Card action icons: favorite + quick view, cleanly inset on the image's
top-right corner (matching the Sale badge's top-left inset), circular,
soft shadow, smooth fade+scale in on hover. */
.ksahk-card-actions{
position:absolute;top:12px;right:12px;z-index:3;
display:flex;flex-direction:column;gap:8px;
}
.ksahk-fav-btn,.ksahk-quickview-btn{
width:34px;height:34px;border-radius:50%;border:none;background:#fff;
box-shadow:0 3px 10px -2px rgba(18,44,28,.35);
cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
opacity:0;transform:scale(.8);
transition:opacity .2s ease, transform .2s ease, background-color .15s ease;
}
li.product:hover .ksahk-fav-btn,li.product:hover .ksahk-quickview-btn,
.ksahk-fav-btn.is-active{opacity:1;transform:scale(1)}
.ksahk-fav-btn:nth-child(1){transition-delay:0s}
.ksahk-fav-btn ~ .ksahk-quickview-btn{transition-delay:.03s}
.ksahk-fav-btn::before{
content:'';width:16px;height:16px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2621' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.6z'/%3E%3C/svg%3E");
}
.ksahk-fav-btn.is-active{background:var(--ksahk-watermelon)}
.ksahk-fav-btn.is-active::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.6z'/%3E%3C/svg%3E");
}
.ksahk-quickview-btn::before{
content:'';width:16px;height:16px;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2621' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
/* Soft tint on hover, not a solid fill — this is a secondary icon action,
the bold solid green is reserved for the primary Add to Cart button. */
.ksahk-quickview-btn:hover,.ksahk-fav-btn:hover:not(.is-active){
background:var(--ksahk-green-light);
}
/* Keep the badge at the same inset as the actions for visual symmetry */
ul.products li.product span.onsale,
.ksahk-badge{top:12px;left:12px}
/* Out of stock */
ul.products li.product.outofstock{opacity:.65}
ul.products li.product.outofstock .button{pointer-events:none;opacity:.6}
ul.products li.product .stock.out-of-stock{
position:absolute;top:10px;right:10px;z-index:2;background:var(--ksahk-ink);color:#fff;
font-size:10.5px;font-weight:700;padding:6px 10px;border-radius:4px;text-transform:uppercase;
}
/* Quick view modal */
.ksahk-qv-overlay{
position:fixed;inset:0;z-index:1000;background:rgba(18,44,28,.55);
display:flex;align-items:center;justify-content:center;padding:20px;
}
.ksahk-qv-overlay[hidden]{display:none}
.ksahk-qv-modal{
background:#fff;border-radius:var(--ksahk-radius-lg);max-width:760px;width:100%;max-height:88vh;overflow:auto;
position:relative;box-shadow:var(--ksahk-shadow-lg);
}
.ksahk-qv-close{
position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
border:none;background:#f0f3ef;font-size:20px;line-height:1;cursor:pointer;color:var(--ksahk-ink);
}
.ksahk-qv-body{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:200px}
.ksahk-qv-loading{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ksahk-ink-soft)}
.ksahk-qv-media{background:#f5f7f4;display:flex;align-items:center;justify-content:center;padding:24px;border-radius:var(--ksahk-radius-lg) 0 0 var(--ksahk-radius-lg)}
.ksahk-qv-media img{max-width:100%;height:auto;object-fit:contain}
.ksahk-qv-info{padding:32px 28px}
.ksahk-qv-title{font-size:22px;font-weight:800;margin:0 0 10px}
.ksahk-qv-price{font-size:20px;font-weight:700;color:var(--ksahk-green-deep);margin-bottom:14px}
.ksahk-qv-price del{color:var(--ksahk-ink-soft);opacity:.7;font-weight:400;margin-right:8px}
.ksahk-qv-excerpt{color:var(--ksahk-ink-soft);font-size:13.5px;line-height:1.7;margin-bottom:18px}
.ksahk-qv-info form.cart{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ksahk-qv-fulllink{display:inline-block;color:var(--ksahk-green-deep);font-weight:700;font-size:13.5px;text-decoration:none}
.ksahk-qv-fulllink:hover{text-decoration:underline}
@media (max-width:640px){
.ksahk-qv-body{grid-template-columns:1fr}
.ksahk-qv-media{border-radius:var(--ksahk-radius-lg) var(--ksahk-radius-lg) 0 0}
}
/* Add-to-cart toast */
.ksahk-toast{
position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
background:var(--ksahk-ink);color:#fff;padding:13px 22px;border-radius:var(--ksahk-radius-pill);
font-size:13.5px;font-weight:600;box-shadow:var(--ksahk-shadow-lg);
opacity:0;transition:opacity .2s ease, transform .2s ease;z-index:1100;
}
.ksahk-toast[hidden]{display:none}
.ksahk-toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* Responsive: shop layout */
@media (max-width:1023px){
.ksahk-shop-layout{grid-template-columns:1fr}
.ksahk-filter-toggle{display:inline-flex}
.ksahk-shop-filters{
position:fixed;top:0;left:-320px;width:300px;max-width:85vw;height:100vh;z-index:1000;
background:var(--ksahk-cream);transition:left .25s ease;overflow-y:auto;padding:20px;
}
body.ksahk-filters-open .ksahk-shop-filters{left:0}
.ksahk-shop-filters-inner{position:static;border:none;box-shadow:none;padding:0}
.ksahk-filters-head{display:flex}
.ksahk-shop-filters-backdrop{
display:none;position:fixed;inset:0;background:rgba(18,44,28,.5);z-index:999;
}
body.ksahk-filters-open .ksahk-shop-filters-backdrop{display:block}
body.ksahk-filters-open{overflow:hidden}
}
@media (max-width:640px){
.ksahk-shop-page{padding:20px 16px 48px}
.ksahk-shop-title{font-size:24px}
.ksahk-shop-toolbar{flex-direction:column;align-items:flex-start}
.ksahk-shop-toolbar-right{width:100%}
.ksahk-cat-quickselect,.ksahk-shop-toolbar-right .woocommerce-ordering{flex:1;min-width:0}
.ksahk-shop-toolbar-right .woocommerce-ordering select{width:100%}
}
/* ==========================================================================
SINGLE PRODUCT PAGE
========================================================================== */
/* ==========================================================================
SINGLE PRODUCT PAGE
Standard WooCommerce content-single-product.php markup, not overridden —
#product-XX.product contains [onsale flash, .woocommerce-product-gallery,
.summary.entry-summary] as its first three children (the flash and our
own badge are position:absolute so they never occupy a grid cell), then
.woocommerce-tabs and .related.products as full-width siblings after.
========================================================================== */
.woocommerce div.product{
background:#fff;
border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius-lg);
padding:28px;
margin-bottom:32px;
position:relative;
display:grid;
grid-template-columns:7fr 5fr;
gap:40px;
align-items:start;
}
/* WooCommerce core's legacy float layout (woocommerce-layout.css) still sets
`div.images{float:left;width:48%}` on this same element (it carries both
.woocommerce-product-gallery and .images) — float is ignored on a grid
item, but percentage width is not, and 48% of THIS item's own grid column
left half the gallery track blank. Same for div.summary at ~46%. Grid
fully replaces that layout here, so both need width:100%. */
.woocommerce div.product .woocommerce-product-gallery{grid-column:1;grid-row:1;width:100% !important;float:none !important}
.woocommerce div.product div.summary{grid-column:2;grid-row:1;width:100% !important;float:none !important}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products{grid-column:1 / -1}
.woocommerce div.product div.images{border-radius:var(--ksahk-radius)}
.woocommerce div.product div.images img{
border-radius:var(--ksahk-radius);
aspect-ratio:4 / 3;object-fit:contain;background:#f7f9f6;
}
.woocommerce div.product .flex-control-thumbs{
display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px !important;
}
.woocommerce div.product .flex-control-thumbs li img{
border-radius:var(--ksahk-radius-sm);border:1px solid var(--ksahk-line);
aspect-ratio:1 / 1;object-fit:contain;background:#f7f9f6;cursor:pointer;
transition:border-color .15s ease;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active{border-color:var(--ksahk-green);border-width:2px}
/* Organic badge for the single-product gallery (ksahk_single_product_organic_badge) —
positioned against the whole .product grid, not the gallery itself, since
it's a sibling of the gallery rather than nested inside WC's own markup;
because the gallery is the first grid item it starts flush at this same
top-left corner, so the overlay still lines up correctly. */
.woocommerce div.product .ksahk-pdp-badge{position:absolute;top:28px;left:28px;z-index:3}
.woocommerce div.product div.summary{padding-left:0}
.ksahk-pdp-kicker{
display:block;font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
color:var(--ksahk-green);margin-bottom:8px;
}
.woocommerce div.product .product_title{font-size:28px;font-weight:800;margin-bottom:10px;line-height:1.25}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-size:26px;margin-bottom:16px;display:block;color:var(--ksahk-green-deep)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ksahk-ink-soft);font-size:14.5px;margin-bottom:16px}
/* Provenance grid: Origin / Farmer / Unit / Farming method — real per-product
meta (inc/product-fields.php), styled as individual pillar cards with an
icon per field instead of one flat box with emoji labels. */
.ksahk-farm-meta{
display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:4px 0 16px;padding:0;
background:none;border-radius:0;
}
.ksahk-farm-meta .item{
padding:12px;border-radius:var(--ksahk-radius-sm);background:var(--ksahk-green-accent);
display:flex;flex-direction:column;gap:2px;
}
.ksahk-farm-meta .item .k{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
color:var(--ksahk-green);display:flex;align-items:center;gap:5px;
}
.ksahk-farm-meta .item .k::before{content:'';width:14px;height:14px;flex:0 0 auto;background:no-repeat center/contain}
.ksahk-farm-meta .item-origin .k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.ksahk-farm-meta .item-farmer .k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E")}
.ksahk-farm-meta .item-unit .k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18M6 7l-2 7a4 4 0 0 0 8 0l-2-7M18 7l-2 7a4 4 0 0 0 8 0l-2-7M12 3v4'/%3E%3C/svg%3E")}
.ksahk-farm-meta .item-method .k::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e3b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c4-3 7-6.5 7-11a7 7 0 0 0-14 0c0 4.5 3 8 7 11z'/%3E%3Cpath d='M12 11v5M9 13l3-2 3 2'/%3E%3C/svg%3E")}
.ksahk-farm-meta .item .v{font-weight:700;font-size:14px;color:var(--ksahk-ink)}
/* Stock status: real WooCommerce text (.stock.in-stock / .out-of-stock),
just with a small status dot instead of bare text. */
.woocommerce div.product p.stock{
display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;
margin:0 0 16px;padding:0;
}
.woocommerce div.product p.stock::before{content:'';width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.woocommerce div.product p.stock.in-stock{color:var(--ksahk-green-deep)}
.woocommerce div.product p.stock.in-stock::before{background:var(--ksahk-green)}
.woocommerce div.product p.stock.out-of-stock{color:var(--ksahk-watermelon)}
.woocommerce div.product p.stock.out-of-stock::before{background:var(--ksahk-watermelon)}
.woocommerce div.product form.cart{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding-top:14px;border-top:1px solid var(--ksahk-line);
}
.woocommerce div.product form.cart .quantity{
margin:0;display:flex;align-items:center;background:var(--ksahk-green-accent);
border-radius:var(--ksahk-radius-pill);padding:4px;
}
.woocommerce div.product form.cart .qty{
width:44px !important;height:38px;text-align:center;padding:0 !important;
border:none !important;background:none !important;box-shadow:none !important;
font-weight:700;-moz-appearance:textfield;
}
.woocommerce div.product form.cart .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ksahk-qty-btn{
width:38px;height:38px;border:none;border-radius:50%;background:#fff;
color:var(--ksahk-green-deep);font-size:18px;font-weight:700;line-height:1;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
box-shadow:var(--ksahk-shadow-sm);transition:background-color .15s ease;
}
.ksahk-qty-btn:hover{background:var(--ksahk-green-light)}
.woocommerce div.product form.cart .single_add_to_cart_button{
flex:1;min-width:180px;padding:13px 20px !important;font-size:15px !important;
}
/* Add to Cart stays the site's default green; the .alt/orange accent (also
used for #place_order at checkout) is reserved for the Buy Now button so
the two real actions read as primary vs. secondary instead of identical
twins in the same color. */
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:not(.ksahk-buy-now-btn){
background-color:var(--ksahk-green) !important;border-color:var(--ksahk-green) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:not(.ksahk-buy-now-btn):hover{
background-color:var(--ksahk-green-deep) !important;border-color:var(--ksahk-green-deep) !important;
}
.woocommerce div.product form.cart .ksahk-buy-now-btn{margin-top:0 !important}
.woocommerce div.product .product_meta{
margin-top:14px;padding-top:14px;border-top:1px solid var(--ksahk-line);
font-size:12.5px;color:var(--ksahk-ink-soft);
}
.woocommerce div.product .product_meta > span{display:inline-block;margin-right:14px}
.woocommerce div.product .woocommerce-tabs{margin-top:28px}
.woocommerce div.product .woocommerce-tabs ul.tabs{
display:flex;gap:4px;flex-wrap:wrap;border-bottom:none;list-style:none;padding:4px;margin:0 0 20px;
background:var(--ksahk-green-accent);border-radius:var(--ksahk-radius-pill);width:fit-content;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0;border:none !important;background:none !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
display:block;padding:10px 18px;font-weight:700;color:var(--ksahk-ink-soft);text-decoration:none;
border-radius:var(--ksahk-radius-pill);transition:background-color .15s ease,color .15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
color:#fff;background:var(--ksahk-green);
}
.woocommerce div.product .woocommerce-tabs .panel{color:var(--ksahk-ink-soft);font-size:14.5px;line-height:1.8}
.woocommerce div.product .related.products{
margin-top:40px;padding-top:32px;border-top:1px solid var(--ksahk-line);
}
.woocommerce div.product .related.products > h2{font-size:20px;font-weight:800;margin-bottom:16px}
@media (max-width:900px){
.woocommerce div.product{grid-template-columns:1fr;gap:20px}
.woocommerce div.product .woocommerce-product-gallery{grid-column:1}
.woocommerce div.product div.summary{grid-column:1;grid-row:2}
}
@media (max-width:768px){
.woocommerce div.product{padding:16px}
.woocommerce div.product .ksahk-pdp-badge{top:16px;left:16px}
.ksahk-farm-meta{grid-template-columns:1fr 1fr}
}
/* ==========================================================================
CART PAGE ( woocommerce/cart/cart.php + cart-totals.php + cross-sells.php
overrides — real WooCommerce cart data/hooks, our own markup/layout )
========================================================================== */
.woocommerce-cart .woocommerce{max-width:1240px;margin:0 auto;padding:30px 20px 64px}
.ksahk-cart-page{width:100%}
.ksahk-cart-grid{
display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;
}
/* ---- Items card ---- */
.ksahk-cart-items-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);overflow:hidden;
}
.ksahk-cart-row{
display:grid;grid-template-columns:1fr 110px 150px 110px;gap:16px;align-items:center;
padding:18px 20px;
}
.ksahk-cart-row + .ksahk-cart-row{border-top:1px solid var(--ksahk-line)}
.ksahk-cart-row-head{
background:var(--ksahk-cream);font-size:12px;font-weight:700;letter-spacing:.3px;
color:var(--ksahk-ink-soft);text-transform:uppercase;padding:14px 20px;
}
.ksahk-cart-col-price,.ksahk-cart-col-qty{text-align:center;justify-self:center}
.ksahk-cart-col-subtotal{text-align:right;justify-self:end;font-weight:800;color:var(--ksahk-green-deep);font-size:16px}
.ksahk-cart-row-head .ksahk-cart-col-subtotal{font-weight:700;color:inherit;font-size:inherit}
.ksahk-cart-row-head .ksahk-cart-col-price{text-align:center}
.ksahk-cart-product-info{display:flex;align-items:center;gap:14px}
.ksahk-cart-remove{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:50%;color:#b7402a !important;background:#f7ddd4 !important;
line-height:1 !important;font-size:17px !important;text-decoration:none;
}
.ksahk-cart-remove:hover{background:#f0c6ba !important}
.ksahk-cart-thumb{flex:0 0 auto}
.ksahk-cart-thumb img{
width:76px;height:76px;object-fit:contain;border-radius:var(--ksahk-radius-sm);
background:var(--ksahk-green-accent);padding:6px;
}
.ksahk-cart-item-body{min-width:0}
.ksahk-cart-item-badge{display:inline-block;margin-bottom:5px;position:static;font-size:10.5px}
.ksahk-cart-item-name{margin:0 0 3px;font-size:15px;font-weight:700;line-height:1.3}
.ksahk-cart-item-name a{color:var(--ksahk-ink)}
.ksahk-cart-item-name a:hover{color:var(--ksahk-green-deep)}
.ksahk-cart-item-origin{margin:0;font-size:12px;color:var(--ksahk-ink-soft)}
.ksahk-cart-col-price{font-weight:700;color:var(--ksahk-ink)}
/* Quantity stepper — reuses the real .ksahk-qty-btn look from the product page */
.ksahk-cart-qty .quantity{
margin:0;display:inline-flex;align-items:center;background:var(--ksahk-green-accent);
border-radius:var(--ksahk-radius-pill);padding:3px;
}
.ksahk-cart-qty .qty{
width:38px !important;height:32px;text-align:center;padding:0 !important;
border:none !important;background:none !important;box-shadow:none !important;
font-weight:700;-moz-appearance:textfield;
}
.ksahk-cart-qty .qty::-webkit-outer-spin-button,
.ksahk-cart-qty .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ksahk-cart-qty .ksahk-qty-btn{width:32px;height:32px;font-size:15px}
/* ---- Coupon + update cart footer ---- */
.ksahk-cart-footer-controls{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
background:var(--ksahk-cream);border-top:1px solid var(--ksahk-line);padding:18px 20px;
}
.ksahk-cart-coupon{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1 1 320px}
.ksahk-cart-coupon input#coupon_code{width:auto;flex:1;min-width:180px}
.ksahk-cart-update{white-space:nowrap}
/* ---- Continue shopping / clear cart ---- */
.ksahk-cart-bottom-actions{
display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-top:18px;flex-wrap:wrap;
}
.ksahk-cart-continue{
display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
color:var(--ksahk-green-deep) !important;text-decoration:none;
}
.ksahk-cart-continue:hover{text-decoration:underline}
.ksahk-cart-clear{font-size:12.5px;color:var(--ksahk-watermelon);text-decoration:none}
.ksahk-cart-clear:hover{text-decoration:underline}
/* ---- Order summary sidebar ---- */
.ksahk-cart-summary-card{
position:sticky;top:100px;background:#fff;border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius);padding:22px;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-cart-summary-title{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
font-size:17px;font-weight:800;margin:0 0 12px;padding-bottom:12px;
border-bottom:1px solid var(--ksahk-line);
}
.ksahk-cart-summary-title-sub{font-size:11px;font-weight:500;color:var(--ksahk-ink-soft)}
.ksahk-cart-summary-card table.shop_table{border:none}
.ksahk-cart-summary-card table.shop_table th,
.ksahk-cart-summary-card table.shop_table td{
border:none;border-top:1px solid var(--ksahk-line);padding:11px 0;font-size:13.5px;
}
.ksahk-cart-summary-card table.shop_table tr:first-child th,
.ksahk-cart-summary-card table.shop_table tr:first-child td{border-top:none}
.ksahk-cart-summary-card .order-total th{font-size:15px;font-weight:800;color:var(--ksahk-ink)}
.ksahk-cart-summary-card .order-total .woocommerce-Price-amount{font-size:20px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-cart-summary-card .order-total td,.ksahk-cart-summary-card .order-total th{padding-top:14px;border-top:1px dashed var(--ksahk-line)}
.wc-proceed-to-checkout{padding:0;margin-top:6px}
.wc-proceed-to-checkout a.checkout-button{
display:block;text-align:center;width:100%;padding:14px !important;font-size:15px !important;
}
.ksahk-cart-secure-note{margin:8px 0 0;text-align:center;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-cart-trust{
margin-top:16px;padding:14px;background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);
border-radius:var(--ksahk-radius-sm);display:flex;flex-direction:column;gap:10px;
}
.ksahk-cart-trust-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--ksahk-ink)}
.ksahk-cart-trust-item svg{flex:0 0 auto;margin-top:1px;color:var(--ksahk-green)}
.ksahk-cart-payment-badges{margin-top:14px;text-align:center}
.ksahk-cart-payment-badges-label{
margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--ksahk-ink-soft);
}
.ksahk-cart-payment-badges-list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ksahk-cart-payment-badge{
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:6px;
padding:4px 8px;font-size:10.5px;font-weight:700;color:var(--ksahk-ink);
}
/* ---- Empty cart (unchanged default template) ---- */
.woocommerce-cart .cart-empty{
background:#fff;border:1px dashed var(--ksahk-line);border-radius:var(--ksahk-radius);
padding:32px;text-align:center;color:var(--ksahk-ink-soft);
}
.woocommerce-cart .return-to-shop{text-align:center;margin-top:16px}
/* ---- Cross-sells ---- */
.ksahk-cart-cross-sells{margin-top:48px;padding-top:32px;border-top:1px solid var(--ksahk-line)}
.ksahk-cross-sells-head{
display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-bottom:18px;
}
.ksahk-cross-sells-head h2{font-size:20px;font-weight:800;margin:0}
.ksahk-cross-sells-sub{margin:4px 0 0;font-size:12.5px;color:var(--ksahk-ink-soft)}
.ksahk-cross-sells-viewall{
display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
color:var(--ksahk-green-deep) !important;text-decoration:none;white-space:nowrap;
}
.ksahk-cross-sells-viewall:hover{text-decoration:underline}
.ksahk-cross-sells-inner ul.products{grid-template-columns:repeat(4,1fr) !important}
@media (max-width:900px){
.ksahk-cart-grid{grid-template-columns:1fr}
.ksahk-cart-summary-card{position:static}
.ksahk-cross-sells-inner ul.products{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:640px){
.ksahk-cart-row{
grid-template-columns:1fr;gap:10px;
}
.ksahk-cart-row-head{display:none}
.ksahk-cart-col-price,.ksahk-cart-col-qty,.ksahk-cart-col-subtotal{
justify-self:stretch;text-align:left;display:flex;align-items:center;justify-content:space-between;
}
.ksahk-cart-col-price::before{content:attr(data-title);color:var(--ksahk-ink-soft);font-weight:600;font-size:12px}
.ksahk-cart-col-qty::before{content:attr(data-title);color:var(--ksahk-ink-soft);font-weight:600;font-size:12px}
.ksahk-cart-col-subtotal::before{content:attr(data-title);color:var(--ksahk-ink-soft);font-weight:600;font-size:12px}
.ksahk-cart-footer-controls{flex-direction:column;align-items:stretch}
.ksahk-cart-bottom-actions{flex-direction:column;align-items:flex-start}
.ksahk-cross-sells-inner ul.products{grid-template-columns:1fr !important}
}
/* ==========================================================================
CHECKOUT & PAYMENT ( woocommerce/checkout/form-checkout.php +
review-order.php + form-coupon.php + payment.php overrides — real
WooCommerce fields/hooks/gateways, our own markup/layout )
========================================================================== */
.woocommerce-checkout .woocommerce{max-width:1240px;margin:0 auto;padding:30px 20px 64px}
.ksahk-checkout-page{width:100%}
/* ---- Step indicator ---- */
.ksahk-checkout-steps{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:14px 0 26px;padding:14px 18px;background:#fff;border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius);box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-checkout-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ksahk-ink-soft)}
.ksahk-checkout-step-dot{
width:22px;height:22px;border-radius:50%;background:#f0f0f0;color:var(--ksahk-ink-soft);
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:0 0 auto;
}
.ksahk-checkout-step.is-done{color:var(--ksahk-green-deep);font-weight:600}
.ksahk-checkout-step.is-done .ksahk-checkout-step-dot{background:var(--ksahk-green-light);color:var(--ksahk-green-deep)}
.ksahk-checkout-step.is-active{color:var(--ksahk-ink);font-weight:800}
.ksahk-checkout-step.is-active .ksahk-checkout-step-dot{background:var(--ksahk-green-deep);color:#fff;box-shadow:var(--ksahk-shadow-sm)}
.ksahk-checkout-step-bar{width:26px;height:2px;background:var(--ksahk-line);flex:0 0 auto}
.ksahk-checkout-step-bar.is-done{background:var(--ksahk-green)}
/* ---- Coupon banner (real .showcoupon / #woocommerce-checkout-form-coupon toggle) ---- */
.ksahk-coupon-banner{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
background:#fff;border-left:4px solid var(--ksahk-green);border-radius:0 var(--ksahk-radius-sm) var(--ksahk-radius-sm) 0;
padding:16px;margin-bottom:22px;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-coupon-banner-main{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ksahk-ink)}
.ksahk-coupon-banner-icon{
padding:8px;border-radius:10px;background:var(--ksahk-green-accent);color:var(--ksahk-green-deep);
display:flex;flex:0 0 auto;
}
.ksahk-coupon-banner-text{color:var(--ksahk-ink-soft)}
.ksahk-coupon-banner .showcoupon{margin-left:4px;color:var(--ksahk-green-deep);font-weight:700;text-decoration:underline}
.ksahk-coupon-banner-badge{
font-size:11px;font-weight:600;color:var(--ksahk-green-deep);background:var(--ksahk-green-light);
padding:5px 10px;border-radius:var(--ksahk-radius-pill);white-space:nowrap;
}
.ksahk-coupon-form{
margin-top:-8px;margin-bottom:22px;background:#fff;border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius-sm);padding:16px;display:flex;gap:10px;flex-wrap:wrap;
}
.ksahk-coupon-form .form-row{margin:0;flex:1 1 200px}
.ksahk-coupon-form .form-row-last{flex:0 0 auto}
/* ---- Two-column grid ---- */
.ksahk-checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start}
.ksahk-checkout-left,.ksahk-checkout-right{min-width:0}
/* ---- Shared card shell (billing card + order-review card + payment card) ---- */
.ksahk-checkout-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
padding:24px;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-checkout-left .ksahk-checkout-card + .ksahk-checkout-card{margin-top:20px}
.ksahk-checkout-card-head{
display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--ksahk-line);
}
.ksahk-checkout-card-head h2,.ksahk-checkout-card-head h3{font-size:17px;font-weight:800;margin:0;flex:1 1 auto}
.ksahk-checkout-card-step{
width:30px;height:30px;border-radius:9px;background:var(--ksahk-green-accent);color:var(--ksahk-green-deep);
display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;
}
.ksahk-checkout-card-required{font-size:11.5px;color:var(--ksahk-ink-soft);white-space:nowrap}
/* ---- Billing fields (real woocommerce_form_field() output, our layout) ---- */
.woocommerce-billing-fields > h3,#ship-to-different-address{display:none}
.woocommerce-billing-fields__field-wrapper{display:flex;flex-wrap:wrap;gap:0 16px}
.woocommerce-billing-fields__field-wrapper .form-row{flex:1 1 100%;margin-bottom:14px}
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last{flex:1 1 calc(50% - 8px)}
.woocommerce-checkout label{font-weight:600;font-size:12.5px;color:var(--ksahk-ink);margin-bottom:5px;display:block}
.woocommerce-checkout label .required{color:#e11d48;text-decoration:none}
.woocommerce-checkout .ksahk-hidden-field{display:none !important}
#ship-to-different-address-checkbox{margin-right:6px;accent-color:var(--ksahk-green)}
/* ---- Right column: order-review + payment cards stacked with a gap ---- */
.ksahk-checkout-review-stack{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
.ksahk-checkout-card-title{
display:flex;align-items:baseline;justify-content:space-between;gap:8px;
font-size:16px;font-weight:800;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--ksahk-line);
}
.ksahk-checkout-card-title-sub{font-size:11px;font-weight:500;color:var(--ksahk-ink-soft)}
/* ---- Order review: item list ---- */
.ksahk-checkout-items{margin-bottom:4px}
.ksahk-checkout-item{
display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--ksahk-line);
}
.ksahk-checkout-item-thumb{position:relative;flex:0 0 auto}
.ksahk-checkout-item-thumb img{
width:56px;height:56px;object-fit:contain;border-radius:var(--ksahk-radius-sm);
background:var(--ksahk-green-accent);padding:5px;border:1px solid var(--ksahk-green-light);
}
.ksahk-checkout-item-qty-badge{
position:absolute;top:-6px;right:-6px;background:var(--ksahk-green-deep);color:#fff;
font-size:9px;font-weight:800;width:17px;height:17px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.ksahk-checkout-item-body{flex:1 1 auto;min-width:0}
.ksahk-checkout-item-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ksahk-checkout-item-name-row h4{margin:0;font-size:14px;font-weight:700}
.ksahk-checkout-item-badge{position:static;font-size:10px}
.ksahk-checkout-item-origin{margin:2px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-checkout-item-unit-price{margin-top:4px;font-size:12px;font-weight:600;color:var(--ksahk-green-deep)}
.ksahk-checkout-item-subtotal{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--ksahk-ink)}
/* ---- Delivery options (real radio picker from cart-shipping.php override) ---- */
.ksahk-checkout-shipping{margin:18px 0;padding-top:16px;border-top:1px solid var(--ksahk-line)}
.ksahk-checkout-subheading{font-size:13px;font-weight:800;margin:0 0 10px;color:var(--ksahk-ink)}
.ksahk-checkout-shipping-table,.ksahk-checkout-shipping-table tbody,
.ksahk-checkout-shipping-table tr,.ksahk-checkout-shipping-table td{display:block;width:100%}
.ksahk-shipping-methods{display:flex;flex-direction:column;gap:10px}
.ksahk-shipping-option{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:13px 14px;border:2px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);
background:#fff;cursor:pointer;transition:border-color .15s ease, background-color .15s ease;
}
.ksahk-shipping-option:hover{border-color:#c7d2cb}
.ksahk-shipping-option.is-selected{border-color:var(--ksahk-green);background:var(--ksahk-green-accent)}
.ksahk-shipping-option-main{display:flex;align-items:center;gap:12px;min-width:0}
.ksahk-shipping-option-main input[type="radio"]{width:16px;height:16px;accent-color:var(--ksahk-green);flex:0 0 auto}
.ksahk-shipping-option-title{font-size:13.5px;font-weight:700;color:var(--ksahk-ink)}
.ksahk-shipping-option-badge{
margin-left:8px;font-size:9.5px;font-weight:700;background:var(--ksahk-green);color:#fff;
padding:2px 7px;border-radius:var(--ksahk-radius-pill);vertical-align:middle;
}
.ksahk-shipping-option-price{font-size:13.5px;font-weight:800;color:var(--ksahk-ink);white-space:nowrap}
.ksahk-shipping-destination{margin:10px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
/* ---- Totals breakdown ---- */
.ksahk-checkout-totals-table{width:100%;border-collapse:collapse}
.ksahk-checkout-totals-table th,.ksahk-checkout-totals-table td{
text-align:left;font-weight:400;border:none;border-top:1px solid var(--ksahk-line);
padding:10px 0;font-size:13px;color:var(--ksahk-ink-soft);
}
.ksahk-checkout-totals-table td{text-align:right;font-weight:600;color:var(--ksahk-ink)}
.ksahk-checkout-totals-table tr:first-child th,.ksahk-checkout-totals-table tr:first-child td{border-top:none}
.ksahk-checkout-totals-table .cart-discount th,.ksahk-checkout-totals-table .cart-discount td{color:var(--ksahk-green-deep)}
.ksahk-checkout-totals-table .order-total th,.ksahk-checkout-totals-table .order-total td{
padding-top:16px;border-top:1px dashed var(--ksahk-line);vertical-align:top;
}
.ksahk-checkout-total-label{display:block;font-size:14.5px;font-weight:800;color:var(--ksahk-ink)}
.ksahk-checkout-total-sub{display:block;font-size:11px;font-weight:400;color:var(--ksahk-ink-soft);margin-top:2px}
.ksahk-checkout-totals-table .order-total td{font-size:22px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-checkout-totals-table .order-total .woocommerce-Price-amount{font-size:22px}
/* ---- Payment methods card ---- */
.ksahk-checkout-secure-tag{
display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
color:var(--ksahk-green-deep);white-space:nowrap;
}
.ksahk-payment-methods.wc_payment_methods{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px}
.ksahk-payment-methods li.wc_payment_method{
border:2px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);
padding:13px 14px;background:#fff;transition:border-color .15s ease, background-color .15s ease;
}
.ksahk-payment-methods li.wc_payment_method:has(input:checked){
border-color:var(--ksahk-green);background:var(--ksahk-green-accent);
}
.ksahk-payment-methods label{
display:flex;align-items:center;justify-content:space-between;gap:10px;
font-weight:700;font-size:13.5px;color:var(--ksahk-ink);margin:0;cursor:pointer;
}
.ksahk-payment-methods input[type="radio"]{width:16px;height:16px;accent-color:var(--ksahk-green);margin-right:10px;flex:0 0 auto}
.ksahk-payment-methods label img{max-height:22px;margin-left:6px;vertical-align:middle}
.ksahk-payment-methods li.payment_method_ksahk_khqr label::after{
content:'KHQR';background:var(--accent-khqr,#E12326);color:#fff;font-size:9.5px;font-weight:900;
letter-spacing:.4px;padding:2px 7px;border-radius:5px;text-transform:uppercase;
}
.ksahk-payment-methods .payment_box{
background:rgba(255,255,255,.7);border:none;border-top:1px solid var(--ksahk-green-light);
border-radius:0;margin-top:12px;padding:12px 0 0;font-size:12.5px;color:var(--ksahk-ink-soft);line-height:1.6;
}
.ksahk-payment-methods .payment_box p{margin:0}
.ksahk-checkout-privacy-note{font-size:11px;line-height:1.6;color:var(--ksahk-ink-soft);margin:18px 0 0}
.ksahk-checkout-privacy-link{color:var(--ksahk-green-deep);text-decoration:underline;font-weight:600}
.form-row.place-order{padding:0;margin-top:16px}
.ksahk-checkout-place-order{
width:100%;padding:15px !important;font-size:15.5px !important;
display:flex;align-items:center;justify-content:center;gap:8px;
background-color:var(--ksahk-orange) !important;border-color:var(--ksahk-orange) !important;
}
.ksahk-checkout-place-order:hover{background-color:#b95c14 !important;border-color:#b95c14 !important}
.ksahk-checkout-guarantees{
margin-top:16px;padding-top:16px;border-top:1px solid var(--ksahk-line);
display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px;color:var(--ksahk-ink-soft);
}
.ksahk-checkout-guarantees div{display:flex;align-items:center;gap:6px}
.ksahk-checkout-guarantees span{color:var(--ksahk-green-deep);font-weight:800}
/* ---- Delivery-address map (Leaflet + OpenStreetMap, no API key) ---- */
.ksahk-checkout-map-wrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--ksahk-line)}
.ksahk-checkout-map-label{
font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
color:var(--ksahk-ink);margin-bottom:8px;display:block;
}
.ksahk-checkout-map{
height:220px;width:100%;border-radius:var(--ksahk-radius-sm);border:1px solid var(--ksahk-line);
overflow:hidden;background:var(--ksahk-cream);z-index:0;
}
/* This theme's global `img{max-width:100%;height:auto}` reset would squash
Leaflet's fixed-size tile/marker images (they must render at their native
pixel size to tile seamlessly) — undo it scoped to just this map. */
.ksahk-checkout-map img{max-width:none !important;height:auto}
.ksahk-checkout-map .leaflet-tile{width:256px !important;height:256px !important}
.ksahk-checkout-map-status{margin:8px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft);min-height:1.4em}
/* Custom inline-SVG pin (no external image request, so it can't show as a
broken-image icon) — leaflet.css puts a white box/border on div-icons by
default since they're normally used for text labels; strip that back off
so only our SVG teardrop shows. */
.ksahk-checkout-map .ksahk-map-pin{background:none;border:none}
.ksahk-checkout-map .ksahk-map-pin svg{display:block}
@media (max-width:960px){
.ksahk-checkout-grid{grid-template-columns:1fr}
.ksahk-checkout-review-stack{position:static}
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last{flex:1 1 100%}
}
@media (max-width:640px){
.ksahk-checkout-steps{font-size:11px}
.ksahk-checkout-step span:last-child{display:none}
.ksahk-checkout-step.is-active span:last-child{display:inline}
.ksahk-coupon-banner{flex-direction:column;align-items:flex-start}
}
/* ==========================================================================
MY ACCOUNT — Login / Register ( woocommerce/myaccount/form-login.php
override — real WooCommerce login + register forms, our own layout )
========================================================================== */
.ksahk-account-page{max-width:1180px;margin:0 auto;padding:30px 20px 64px}
.ksahk-account-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:18px}
.ksahk-account-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);
padding:28px 30px;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-account-tabs{display:flex;gap:6px;border-bottom:1px solid var(--ksahk-line);margin-bottom:26px}
/* .button/button already get a green-pill !important reset site-wide (add-to-cart,
checkout, etc.) — these three controls are plain toggle/link buttons, not CTAs,
so every property that reset touches has to be re-forced back off here too. */
.ksahk-account-tab{
background:none !important;border:none !important;box-shadow:none !important;
border-radius:0 !important;color:var(--ksahk-ink-soft) !important;font-weight:600 !important;
padding:0 4px 12px;margin-right:20px;cursor:pointer;font-size:16px;position:relative;
transition:color .15s ease;
}
.ksahk-account-tab:hover{background:none !important;transform:none !important;box-shadow:none !important;color:var(--ksahk-ink) !important}
.ksahk-account-tab.is-active{color:var(--ksahk-green-deep) !important;font-weight:800 !important}
.ksahk-account-tab.is-active::after{
content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ksahk-green-deep);
}
.ksahk-account-pane{display:none}
.ksahk-account-pane.is-active{display:block}
.ksahk-account-heading{margin-bottom:22px}
.ksahk-account-heading h1{font-size:26px;font-weight:800;margin:0 0 8px;color:var(--ksahk-ink)}
.ksahk-account-heading p{margin:0;font-size:13.5px;color:var(--ksahk-ink-soft);line-height:1.6}
.ksahk-account-brand{font-weight:700;color:var(--ksahk-green-deep)}
.ksahk-account-form .form-row{margin-bottom:16px}
.ksahk-account-form label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--ksahk-ink);margin-bottom:7px;display:block}
.ksahk-account-form label .required{color:#e11d48;text-decoration:none}
.ksahk-account-form input.input-text{width:100%}
/* Left icon on username/email inputs */
.ksahk-input-icon-wrap{position:relative;display:block}
.ksahk-input-icon-wrap input.input-text{padding-left:40px !important}
.ksahk-input-icon-wrap > .ksahk-input-icon{
position:absolute;top:50%;left:12px;transform:translateY(-50%);
color:var(--ksahk-ink-soft);pointer-events:none;
}
.ksahk-password-wrap{position:relative;display:block}
.ksahk-password-wrap input.input-text{padding-left:40px !important;padding-right:42px !important}
.ksahk-password-wrap > .ksahk-input-icon{
position:absolute;top:50%;left:12px;transform:translateY(-50%);
color:var(--ksahk-ink-soft);pointer-events:none;
}
.ksahk-password-toggle{
background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
position:absolute;top:50%;right:12px;transform:translateY(-50%);
color:var(--ksahk-ink-soft) !important;cursor:pointer;padding:4px;display:flex;
}
.ksahk-password-toggle:hover{background:none !important;transform:translateY(-50%) !important;color:var(--ksahk-green-deep) !important}
.ksahk-password-toggle svg{display:none}
.ksahk-password-toggle svg:not([hidden]){display:block}
.ksahk-account-note{font-size:12.5px;color:var(--ksahk-ink-soft);margin:0 0 16px}
.ksahk-account-form-row-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ksahk-ink);margin:0;cursor:pointer}
.woocommerce-form-login__rememberme input{accent-color:var(--ksahk-green);width:16px;height:16px}
.ksahk-account-forgot{font-size:13px;font-weight:600;color:var(--ksahk-green-deep);text-decoration:none}
.ksahk-account-forgot:hover{text-decoration:underline}
.ksahk-account-submit{
width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px !important;font-size:15px !important;
}
.ksahk-account-switch-prompt{
margin-top:22px;padding-top:20px;border-top:1px solid var(--ksahk-line);
text-align:center;font-size:13.5px;color:var(--ksahk-ink-soft);
}
.ksahk-account-switch-link{
background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
padding:0 !important;margin-left:4px;cursor:pointer;font-size:inherit;
font-weight:800;color:var(--ksahk-orange) !important;text-decoration:none;
}
.ksahk-account-switch-link:hover{background:none !important;transform:none !important;text-decoration:underline}
/* ---- Right column: benefits / trust / hotline ---- */
.ksahk-account-side{display:flex;flex-direction:column;gap:18px}
.ksahk-account-perk-card{
background:linear-gradient(135deg, var(--ksahk-green-deep), var(--ksahk-green));
border-radius:var(--ksahk-radius-lg);padding:26px;color:#fff;position:relative;overflow:hidden;
}
.ksahk-account-perk-head{margin-bottom:12px}
.ksahk-account-perk-badge{
display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
padding:4px 10px;border-radius:var(--ksahk-radius-pill);
}
.ksahk-account-perk-card h2{font-size:19px;font-weight:800;margin:0 0 10px;color:#fff}
.ksahk-account-perk-card > p{font-size:13px;color:rgba(255,255,255,.85);line-height:1.6;margin:0 0 18px}
.ksahk-account-perk-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ksahk-account-perk-card li{display:flex;align-items:flex-start;gap:10px}
.ksahk-account-perk-icon{
flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);
color:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.ksahk-account-perk-card strong{display:block;font-size:13.5px;font-weight:700;color:#fff}
.ksahk-account-perk-card li p{margin:2px 0 0;font-size:12px;color:rgba(255,255,255,.75);line-height:1.5}
.ksahk-account-trust-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);
padding:20px;box-shadow:var(--ksahk-shadow-sm);display:flex;align-items:center;gap:14px;
}
.ksahk-account-trust-icon{
flex:0 0 auto;width:46px;height:46px;border-radius:var(--ksahk-radius);background:var(--ksahk-green-accent);
color:var(--ksahk-green-deep);display:flex;align-items:center;justify-content:center;
}
.ksahk-account-trust-card h3{margin:0;font-size:13.5px;font-weight:800;color:var(--ksahk-ink)}
.ksahk-account-trust-card p{margin:3px 0 0;font-size:12px;color:var(--ksahk-ink-soft);line-height:1.5}
.ksahk-account-hotline-card{
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);
padding:18px;
}
.ksahk-account-hotline-main{display:flex;align-items:center;gap:12px}
.ksahk-account-hotline-icon{
flex:0 0 auto;width:36px;height:36px;border-radius:var(--ksahk-radius-sm);background:#fff;
color:var(--ksahk-orange);display:flex;align-items:center;justify-content:center;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-account-hotline-label{margin:0;font-size:11.5px;color:var(--ksahk-ink-soft);font-weight:600}
.ksahk-account-hotline-number{margin:2px 0 0;font-size:13.5px;font-weight:800;color:var(--ksahk-ink)}
.ksahk-account-hotline-number span{color:var(--ksahk-orange)}
@media (max-width:900px){
.ksahk-account-grid{grid-template-columns:1fr}
.ksahk-account-card{padding:22px}
}
@media (max-width:480px){
.ksahk-account-tab{font-size:14px;margin-right:14px}
.ksahk-account-heading h1{font-size:22px}
}
/* ==========================================================================
HOMEPAGE
========================================================================== */
.ksahk-home{padding:0 !important}
.ksahk-hero-v2{
position:relative;
min-height:calc(100vh - var(--ksahk-header-h));
min-height:calc(100svh - var(--ksahk-header-h));
display:flex;align-items:center;justify-content:center;
background-color:var(--ksahk-green-deep);
background-size:cover;
background-position:center;
text-align:center;
padding:40px 20px;
margin:0 -20px;
}
.ksahk-hero-v2-video{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;
object-fit:cover;
pointer-events:none;
/* Faded in only once frames are actually playing, so a slow or blocked video
never flashes a black box over the poster image. */
opacity:0;transition:opacity .6s ease;
}
.ksahk-hero-v2-video.is-playing{opacity:1}
.ksahk-hero-v2-youtube{
position:absolute;inset:0;z-index:0;
overflow:hidden;pointer-events:none;
opacity:0;transition:opacity .6s ease;
}
.ksahk-hero-v2-youtube.is-playing{opacity:1}
/* YouTube only ever serves 16:9, so the player is sized past both hero edges
and centred — whichever of the two sizings is larger wins, and the overflow
is clipped. This is what stops it letterboxing inside the banner. */
.ksahk-hero-v2-youtube iframe{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:100vw;height:56.25vw;
min-width:177.78vh;min-height:100vh;
border:0;pointer-events:none;
}
.ksahk-hero-v2-overlay{
position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg, rgba(18,63,40,.55) 0%, rgba(18,63,40,.7) 100%);
}
.ksahk-hero-v2-content{position:relative;z-index:2;max-width:720px}
.ksahk-hero-v2-content h1{
font-size:clamp(28px,4.2vw,46px);
font-family:'Koulen','Noto Sans Khmer',sans-serif;
/* Koulen ships a single weight. Asking for 900 makes the browser synthesise
the bold, which thickens and smears Khmer coeng stacks — and it is already
a heavy display face, so there is nothing to gain. */
font-weight:400;
color:#fff;
margin:0 0 14px;
/* Looser than body copy: Koulen sets its vowel signs and subscripts further
from the baseline, and at 1.35 the two wrapped lines collide. */
line-height:1.5;
--ksahk-h1-shadow:0 2px 12px rgba(0,0,0,.25);
text-shadow:var(--ksahk-h1-shadow);
}
.ksahk-hero-v2-content p{
font-size:16.5px;
color:rgba(255,255,255,.92);
margin:0 0 28px;
}
.ksahk-hero-v2-btn{
display:inline-block;
padding:15px 36px;
border-radius:var(--ksahk-radius-pill);
background:var(--ksahk-green);
color:#fff !important;
font-weight:700;font-size:15px;
text-decoration:none;
box-shadow:var(--ksahk-shadow);
transition:transform .15s ease, background-color .15s ease;
}
.ksahk-hero-v2-btn:hover{background:#154a30;transform:translateY(-2px)}
/* Hero title "writing" animation. Every grapheme is in the DOM from the start
and only toggles visibility, so the wrap is decided once up front and the
heading never reflows mid-animation. The caret rides the last revealed
cluster rather than sitting on the h1, which would pin it to the end of the
full (already laid out) text instead of following the typing. */
.ksahk-hero-v2-content h1 .ksahk-type-ch{color:transparent;text-shadow:none}
.ksahk-hero-v2-content h1 .ksahk-type-ch.is-shown{color:#fff;text-shadow:var(--ksahk-h1-shadow)}
.ksahk-hero-v2-content h1 .ksahk-type-ch.is-cursor{position:relative}
.ksahk-hero-v2-content h1 .ksahk-type-ch.is-cursor::after{
content:'';
position:absolute;top:.14em;right:-.12em;
width:.055em;height:1em;
background:#fff;border-radius:2px;
animation:ksahk-caret-blink .85s steps(1,end) infinite;
}
@keyframes ksahk-caret-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.ksahk-hero-v2-content h1 .ksahk-type-ch{color:#fff;text-shadow:var(--ksahk-h1-shadow)}
.ksahk-hero-v2-content h1 .ksahk-type-ch.is-cursor::after{display:none}
}
.ksahk-section{max-width:1180px;margin:0 auto;padding:48px 20px}
.ksahk-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.ksahk-section-head h2{font-size:25px;font-weight:800;margin:0}
.ksahk-section-head a{font-size:13.5px;font-weight:700;color:var(--ksahk-green-deep);text-decoration:none}
.ksahk-section-head a:hover{text-decoration:underline}
.ksahk-section-head-sub{align-items:flex-start}
.ksahk-section-sub{margin:6px 0 0;font-size:13.5px;color:var(--ksahk-ink-soft)}
/* "Explore Our Harvest" — one large photo card + two stacked smaller ones */
.ksahk-explore-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
grid-template-rows:1fr 1fr;
gap:16px;
height:460px;
}
.ksahk-explore-card{
position:relative;
display:block;
border-radius:var(--ksahk-radius);
background-color:var(--ksahk-green-light);
background-size:cover;
background-position:center;
overflow:hidden;
box-shadow:var(--ksahk-shadow-sm);
transition:transform .25s ease, box-shadow .25s ease;
}
.ksahk-explore-card:hover{transform:translateY(var(--ksahk-lift));box-shadow:var(--ksahk-shadow-hover)}
.ksahk-explore-card::after{
content:'';position:absolute;inset:0;
background:linear-gradient(0deg, rgba(18,44,28,.68) 0%, rgba(18,44,28,0) 55%);
}
.ksahk-explore-large{grid-row:1 / 3;grid-column:1}
.ksahk-explore-small{grid-column:2}
.ksahk-explore-small:nth-of-type(2){grid-row:1}
.ksahk-explore-small:nth-of-type(3){grid-row:2}
.ksahk-explore-label{
position:absolute;left:20px;bottom:18px;z-index:1;
color:#fff;font-weight:800;font-size:17px;
text-shadow:0 1px 6px rgba(0,0,0,.3);
}
@media (max-width:760px){
.ksahk-explore-grid{grid-template-columns:1fr;grid-template-rows:none;height:auto}
.ksahk-explore-card{height:200px}
.ksahk-explore-large{grid-row:auto;grid-column:auto}
.ksahk-explore-small{grid-column:auto}
.ksahk-explore-small:nth-of-type(2),.ksahk-explore-small:nth-of-type(3){grid-row:auto}
}
.ksahk-section .products{margin:0}
.ksahk-farmer-band{background:var(--ksahk-green-light);padding:48px 20px;margin:0 -20px}
.ksahk-farmer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ksahk-farmer-card{
background:#fff;border-radius:var(--ksahk-radius);padding:20px;display:flex;gap:14px;
border:1px solid var(--ksahk-line);box-shadow:var(--ksahk-shadow-sm);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ksahk-farmer-card:hover{transform:translateY(var(--ksahk-lift));box-shadow:var(--ksahk-shadow-hover);border-color:var(--ksahk-green)}
.ksahk-farmer-card .avatar{width:56px;height:56px;border-radius:50%;background:var(--ksahk-green-light);border:1px solid var(--ksahk-line);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;overflow:hidden}
/* Photos are rarely square — cover crops them to the circle instead of squashing. */
.ksahk-farmer-card .avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.ksahk-farmer-card .ksahk-farmer-body{min-width:0}
.ksahk-farmer-card .ksahk-farmer-location{display:block;font-size:12px;color:var(--ksahk-ink-soft);margin-top:2px}
/* Quotation marks come from here, not from the stored text and not from a
element (whose browser-supplied marks were doubling up with the typed ones). */
.ksahk-farmer-card .ksahk-farmer-quote{display:block;font-style:italic;color:var(--ksahk-ink-soft);font-size:13px;margin:6px 0 0}
.ksahk-farmer-card .ksahk-farmer-quote::before{content:'\201C'}
.ksahk-farmer-card .ksahk-farmer-quote::after{content:'\201D'}
.ksahk-benefits{max-width:1180px;margin:0 auto;padding:48px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;text-align:center}
.ksahk-benefits .ic{font-size:30px}
.ksahk-benefits h4{margin:10px 0 4px;font-size:14.5px}
.ksahk-benefits p{margin:0;font-size:12.5px;color:var(--ksahk-ink-soft)}
/* ==========================================================================
ORDER TRACKING — refined to the shared design tokens
========================================================================== */
/* ==========================================================================
ORDER TRACKING
Built on the theme's own tokens rather than the mockup's Tailwind CDN, which
compiles at runtime in the browser and would fight the stylesheet already
here.
========================================================================== */
.ksahk-track-page{max-width:1180px;margin:0 auto;padding:8px 0 40px}
.ksahk-track-hero{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);
box-shadow:var(--ksahk-shadow-sm);padding:34px 26px;margin-bottom:26px;text-align:center;
position:relative;overflow:hidden;
}
.ksahk-track-hero::after{
content:'';position:absolute;top:-120px;right:-120px;width:320px;height:320px;border-radius:50%;
background:radial-gradient(circle, var(--ksahk-green-light) 0%, transparent 70%);
pointer-events:none;z-index:0;
}
.ksahk-track-eyebrow{
display:inline-flex;align-items:center;gap:7px;position:relative;
background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);
color:var(--ksahk-green-deep);font-size:12px;font-weight:700;
padding:6px 13px;border-radius:var(--ksahk-radius-pill);margin-bottom:14px;
}
.ksahk-track-eyebrow svg{width:15px;height:15px;flex:0 0 auto}
.ksahk-track-title{font-size:clamp(21px,3vw,29px);font-weight:800;margin:0 0 8px;position:relative}
.ksahk-track-lead{
font-size:13.5px;color:var(--ksahk-ink-soft);margin:0 auto 22px;max-width:620px;
line-height:1.75;position:relative;
}
.ksahk-track-form{
display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;position:relative;
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius);padding:10px;max-width:840px;margin:0 auto;
}
.ksahk-track-field{flex:1 1 220px;display:flex;align-items:center;gap:9px;background:#fff;
border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);padding:0 12px;min-width:0}
.ksahk-track-field:focus-within{border-color:var(--ksahk-green);box-shadow:0 0 0 3px var(--ksahk-green-light)}
.ksahk-track-field-icon{display:flex;align-items:center;color:var(--ksahk-ink-soft);font-weight:700;font-size:14px;flex:0 0 auto}
.ksahk-track-field-icon svg{width:15px;height:15px}
.ksahk-track-page .ksahk-track-field input{
border:none !important;background:transparent !important;box-shadow:none !important;
padding:12px 0 !important;font-size:13.5px;width:100%;min-width:0;color:var(--ksahk-ink);
}
.ksahk-track-page .ksahk-track-field input:focus{outline:none;box-shadow:none !important}
.ksahk-track-submit{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:12px 26px;border:none;cursor:pointer;
background:var(--ksahk-green-deep);color:#fff;font-weight:700;font-size:13.5px;
border-radius:var(--ksahk-radius-sm);transition:background-color .15s ease;
}
.ksahk-track-submit:hover{background:var(--ksahk-green)}
.ksahk-track-submit svg{width:15px;height:15px}
.ksahk-track-hint{font-size:11.5px;color:var(--ksahk-ink-soft);margin:12px 0 0;position:relative}
.ksahk-track-error{
color:#8f2f1c;background:#fbe6df;border:1px solid #f2c9bb;
padding:14px 16px;border-radius:var(--ksahk-radius-sm);font-size:13.5px;
}
/* Result: main column + sidebar, matching the mockup's 8/4 split. */
.ksahk-track-result{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.ksahk-track-main,.ksahk-track-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.ksahk-track-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:22px;
}
.ksahk-track-card-title{font-size:14px;font-weight:800;margin:0 0 14px}
.ksahk-track-order-head{
display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
padding-bottom:18px;border-bottom:1px solid var(--ksahk-line);
}
.ksahk-track-order-idline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ksahk-track-order-idline h2{margin:0;font-size:19px;font-weight:800}
.ksahk-track-order-date{margin:6px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-track-badge{
display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
padding:4px 11px;border-radius:var(--ksahk-radius-pill);
background:var(--ksahk-green-light);color:var(--ksahk-green-deep);border:1px solid #c9e3d3;
}
.ksahk-track-badge.is-holding{background:var(--ksahk-mango-soft);color:#8a5200;border-color:#f3ddb4}
.ksahk-track-badge.is-stopped{background:var(--ksahk-watermelon-soft);color:#a32744;border-color:#f4c4d1}
.ksahk-track-eta{
background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);
border-radius:var(--ksahk-radius-sm);padding:9px 14px;text-align:right;
}
.ksahk-track-eta-label{display:block;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--ksahk-green-deep);text-transform:uppercase}
.ksahk-track-eta-value{display:block;font-size:13px;font-weight:700;color:var(--ksahk-ink);margin-top:2px}
.ksahk-track-notice{margin-top:18px;padding:14px 16px;border-radius:var(--ksahk-radius-sm);font-weight:700;font-size:13.5px}
.ksahk-track-notice.is-holding{background:var(--ksahk-mango-soft);color:#8a5200}
.ksahk-track-notice.is-stopped{background:var(--ksahk-watermelon-soft);color:#a32744}
/* Stepper. The connecting rail is a pseudo-element on the list rather than a
border on each step, so the green progress fill can span steps cleanly. */
.ksahk-track-stepper{
list-style:none;margin:0;padding:26px 0 6px;display:grid;gap:16px;position:relative;
grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}
.ksahk-track-stepper::before,
.ksahk-track-stepper::after{
content:'';position:absolute;top:44px;height:3px;border-radius:2px;
}
.ksahk-track-stepper::before{left:10%;right:10%;background:var(--ksahk-line)}
.ksahk-track-stepper::after{
left:10%;width:calc((80%) * (var(--ksahk-track-progress,0%) / 100%));
background:var(--ksahk-green);
}
.ksahk-track-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;z-index:1}
.ksahk-track-step-dot{
width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--ksahk-line);color:#fff;box-shadow:0 0 0 5px #fff;
}
.ksahk-track-step-dot svg{width:17px;height:17px}
.ksahk-track-step.is-done .ksahk-track-step-dot{background:var(--ksahk-green)}
.ksahk-track-step.is-active .ksahk-track-step-dot{background:var(--ksahk-green-deep);box-shadow:0 0 0 5px #fff,0 0 0 9px var(--ksahk-green-light)}
.ksahk-track-step-label{font-size:11.5px;font-weight:700;line-height:1.5}
.ksahk-track-step.is-todo .ksahk-track-step-label{color:var(--ksahk-ink-soft);font-weight:600}
.ksahk-track-step-time{font-size:10.5px;color:var(--ksahk-ink-soft)}
.ksahk-track-courier{
margin-top:20px;padding:14px;border-radius:var(--ksahk-radius-sm);
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.ksahk-track-courier-who{display:flex;align-items:center;gap:11px;min-width:0}
.ksahk-track-courier-avatar{
width:40px;height:40px;border-radius:50%;flex:0 0 auto;
background:var(--ksahk-green-deep);color:#fff;font-weight:800;
display:flex;align-items:center;justify-content:center;
}
.ksahk-track-courier-who strong{font-size:13px;font-weight:700}
.ksahk-track-courier-call{
display:inline-flex;align-items:center;gap:7px;background:#fff;
border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);
padding:9px 15px;font-size:12.5px;font-weight:700;color:var(--ksahk-ink) !important;text-decoration:none;
}
.ksahk-track-courier-call:hover{border-color:var(--ksahk-green)}
.ksahk-track-courier-call svg{width:14px;height:14px;color:var(--ksahk-green-deep)}
.ksahk-track-log{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--ksahk-green-light)}
.ksahk-track-log li{position:relative;padding-bottom:16px}
.ksahk-track-log li:last-child{padding-bottom:0}
.ksahk-track-log li::before{
content:'';position:absolute;left:-26px;top:4px;width:10px;height:10px;border-radius:50%;
background:var(--ksahk-green);box-shadow:0 0 0 4px var(--ksahk-green-accent);
}
.ksahk-track-log-time{display:block;font-size:11px;color:var(--ksahk-ink-soft);margin-bottom:2px}
.ksahk-track-log strong{font-size:12.5px;font-weight:700}
.ksahk-track-log p{margin:3px 0 0;font-size:12px;color:var(--ksahk-ink-soft);line-height:1.65}
.ksahk-track-items{display:flex;flex-direction:column;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--ksahk-line)}
.ksahk-track-item{display:flex;align-items:flex-start;gap:11px}
.ksahk-track-item-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:var(--ksahk-radius-sm);overflow:hidden;background:var(--ksahk-green-accent)}
.ksahk-track-item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ksahk-track-item-body{flex:1 1 auto;min-width:0}
.ksahk-track-item-body h4{margin:0;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ksahk-track-item-badge{font-size:9.5px;font-weight:700;background:var(--ksahk-green-light);color:var(--ksahk-green-deep);padding:2px 6px;border-radius:4px}
.ksahk-track-item-body p{margin:2px 0 0;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-track-item-qty{display:block;margin-top:2px;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-track-item-total{flex:0 0 auto;font-size:13px;font-weight:800}
.ksahk-track-totals{margin:14px 0 0}
.ksahk-track-totals div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:4px 0}
.ksahk-track-totals dt{margin:0;color:var(--ksahk-ink-soft)}
.ksahk-track-totals dd{margin:0;font-weight:700}
.ksahk-track-totals .is-discount dd{color:var(--ksahk-green-deep)}
.ksahk-track-grand{margin-top:8px;padding-top:10px !important;border-top:1px solid var(--ksahk-line);align-items:baseline}
.ksahk-track-grand dt{font-size:13px;font-weight:800;color:var(--ksahk-ink) !important}
.ksahk-track-grand dd{font-size:18px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-track-grand dd .woocommerce-Price-amount{font-size:18px}
.ksahk-track-address{background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);padding:13px;font-size:12.5px;line-height:1.75}
.ksahk-track-address address{font-style:normal;margin:0}
.ksahk-track-address-phone{margin:6px 0 0;color:var(--ksahk-ink-soft)}
.ksahk-track-address-note{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--ksahk-line);font-size:11.5px;color:var(--ksahk-green-deep)}
.ksahk-track-payline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ksahk-line);font-size:12px}
.ksahk-track-payline > span:first-child{color:var(--ksahk-ink-soft)}
.ksahk-track-paytag{font-weight:700}
.ksahk-track-paytag.is-paid{background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);color:var(--ksahk-green-deep);padding:3px 9px;border-radius:var(--ksahk-radius-pill)}
.ksahk-track-support{
background:linear-gradient(160deg,var(--ksahk-green-deep),#0d2f1d);
border-radius:var(--ksahk-radius);padding:20px;color:#fff;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-track-support h4{margin:0 0 8px;font-size:14px;font-weight:800;color:#fff}
.ksahk-track-support p{margin:0 0 14px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.82)}
.ksahk-track-support-btn{
display:block;text-align:center;background:#fff;color:var(--ksahk-green-deep) !important;
font-weight:800;font-size:13px;padding:10px;border-radius:var(--ksahk-radius-sm);text-decoration:none;
}
.ksahk-track-support-btn:hover{background:var(--ksahk-green-accent)}
@media (max-width:960px){
.ksahk-track-result{grid-template-columns:1fr}
}
@media (max-width:600px){
.ksahk-track-hero{padding:24px 16px}
.ksahk-track-submit{width:100%}
/* Stepper turns vertical: the horizontal rail would have nothing to span. */
.ksahk-track-stepper{grid-template-columns:1fr;gap:14px;padding-top:16px}
.ksahk-track-stepper::before,.ksahk-track-stepper::after{display:none}
.ksahk-track-step{flex-direction:row;text-align:left;gap:12px;align-items:center}
.ksahk-track-step-dot{width:30px;height:30px;box-shadow:none}
.ksahk-track-step.is-active .ksahk-track-step-dot{box-shadow:0 0 0 4px var(--ksahk-green-light)}
}
.ksahk-timeline{margin:20px 0}
.ksahk-tl-step{display:flex;gap:14px}
.ksahk-tl-dot-col{display:flex;flex-direction:column;align-items:center}
.ksahk-tl-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.ksahk-tl-dot.done{background:var(--ksahk-green);color:#fff}
.ksahk-tl-dot.active{background:var(--ksahk-green-deep);color:#fff;box-shadow:0 0 0 4px var(--ksahk-green-light)}
.ksahk-tl-dot.pending{background:#f3eee0;color:#8b9280;border:1px solid var(--ksahk-line)}
.ksahk-tl-bar{width:2px;flex:1;min-height:24px;background:var(--ksahk-line)}
.ksahk-tl-dot.done ~ .ksahk-tl-bar{background:var(--ksahk-green)}
.ksahk-tl-content{padding-bottom:22px}
.ksahk-tl-content h4{margin:0;font-size:14px}
/* ---- Contact page ---- */
.ksahk-contact-wrap{max-width:1180px;margin:0 auto;padding:44px 20px;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px}
.ksahk-contact-info{background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);padding:22px;box-shadow:var(--ksahk-shadow-sm)}
.ksahk-contact-info .row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--ksahk-line)}
.ksahk-contact-info .row:last-child{border-bottom:none}
.ksahk-contact-form{background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-lg);padding:26px;box-shadow:var(--ksahk-shadow-sm)}
.ksahk-contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ksahk-contact-form label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px}
.ksahk-contact-form input,.ksahk-contact-form textarea{
width:100%;margin-bottom:14px;
}
.ksahk-contact-map{margin-top:16px;border-radius:var(--ksahk-radius-sm);overflow:hidden;border:1px solid var(--ksahk-line)}
.ksahk-form-success{background:var(--ksahk-green-light);color:var(--ksahk-green-deep);padding:14px 16px;border-radius:var(--ksahk-radius-sm);margin-bottom:16px;font-size:13.5px}
.ksahk-form-error{background:#f7ddd4;color:#b7402a;padding:14px 16px;border-radius:var(--ksahk-radius-sm);margin-bottom:16px;font-size:13.5px}
@media (max-width:820px){
.ksahk-contact-wrap{grid-template-columns:1fr}
.ksahk-contact-form .field-row{grid-template-columns:1fr}
}
/* ---- Mobile sticky add-to-cart on single product ---- */
.ksahk-sticky-atc{
position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--ksahk-line);
padding:12px 16px;display:none;align-items:center;gap:12px;z-index:999;
box-shadow:0 -8px 20px -12px rgba(0,0,0,.2);
}
.ksahk-sticky-atc .price{font-weight:800;color:var(--ksahk-green-deep);font-size:17px;flex:0 0 auto}
.ksahk-sticky-atc .button{flex:1;width:auto;min-height:44px;padding:12px 20px !important}
@media (max-width:768px){
body.single-product .ksahk-sticky-atc{display:flex}
body.single-product{padding-bottom:64px}
}
.ksahk-thankyou-wrap{max-width:560px;margin:32px auto 0}
.ksahk-thankyou-card{text-align:center;padding:36px 32px}
.ksahk-thankyou-icon{
width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
background:var(--ksahk-green-light);color:var(--ksahk-green-deep);
display:flex;align-items:center;justify-content:center;
}
.ksahk-thankyou-icon-failed{background:var(--ksahk-watermelon-soft);color:var(--ksahk-watermelon)}
.ksahk-thankyou-title{font-size:22px;font-weight:800;margin:0 0 8px;color:var(--ksahk-ink)}
.ksahk-thankyou-sub{font-size:13.5px;color:var(--ksahk-ink-soft);margin:0 0 24px;line-height:1.6}
.ksahk-thankyou-meta{
display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
text-align:left;padding:18px 0;border-top:1px solid var(--ksahk-line);
border-bottom:1px solid var(--ksahk-line);margin-bottom:24px;
}
.ksahk-thankyou-meta-item span{display:block;font-size:11px;color:var(--ksahk-ink-soft);margin-bottom:3px}
.ksahk-thankyou-meta-item strong{font-size:14px;color:var(--ksahk-ink)}
.ksahk-thankyou-meta-total{grid-column:1 / -1}
.ksahk-thankyou-meta-total strong{font-size:18px;color:var(--ksahk-green-deep)}
.ksahk-thankyou-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ksahk-thankyou-btn-secondary.button{
background:transparent !important;color:var(--ksahk-green-deep) !important;
border:1.5px solid var(--ksahk-line) !important;box-shadow:none !important;
}
.ksahk-thankyou-btn-secondary.button:hover{border-color:var(--ksahk-green) !important}
@media (max-width:480px){
.ksahk-thankyou-card{padding:28px 20px}
.ksahk-thankyou-meta{grid-template-columns:1fr}
}
/* ==========================================================================
MY ACCOUNT DASHBOARD
Prefixed ksahk-dash-* rather than ksahk-account-*, which already belongs to
the login/register screen.
========================================================================== */
/* woocommerce-layout.css sets float:left;width:30% on the nav and
float:right;width:68% on the content, at two-class specificity. Inside a grid
the floats are inert, but those widths are not: the nav was rendering at 30%
of the 280px track (~84px). Reset both so the grid tracks decide the widths. */
.woocommerce-account .ksahk-dash .woocommerce-MyAccount-navigation,
.woocommerce-account .ksahk-dash .woocommerce-MyAccount-content{float:none;width:auto;max-width:none}
.ksahk-dash{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start;max-width:1180px;margin:0 auto;padding:8px 0 44px}
.ksahk-dash-content{min-width:0;display:flex;flex-direction:column;gap:20px}
/* ---- Sidebar ---- */
.ksahk-dash-nav{display:flex;flex-direction:column;gap:16px;min-width:0}
.ksahk-dash-profile{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:14px;display:flex;align-items:center;gap:11px;
}
.ksahk-dash-avatar{
width:44px;height:44px;flex:0 0 auto;border-radius:50%;
background:var(--ksahk-green-light);color:var(--ksahk-green-deep);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.ksahk-dash-profile-text{min-width:0;display:block}
.ksahk-dash-profile-text strong{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksahk-dash-profile-text span{display:block;font-size:11.5px;color:var(--ksahk-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksahk-dash-menu{
list-style:none;margin:0;padding:6px;background:#fff;
border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-dash-menu li{margin:0}
.ksahk-dash-menu li + li{margin-top:2px}
.ksahk-dash-menu a{
display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--ksahk-radius-sm);
font-size:13px;font-weight:600;color:var(--ksahk-ink) !important;text-decoration:none;
transition:background-color .15s ease,color .15s ease;
}
.ksahk-dash-menu a:hover{background:var(--ksahk-green-accent);color:var(--ksahk-green-deep) !important}
.ksahk-dash-menu-icon{display:flex;flex:0 0 auto;color:var(--ksahk-ink-soft)}
.ksahk-dash-menu-icon svg{width:16px;height:16px}
.ksahk-dash-menu-label{flex:1 1 auto;min-width:0}
.ksahk-dash-menu-badge{
flex:0 0 auto;background:var(--ksahk-green-light);color:var(--ksahk-green-deep);
font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--ksahk-radius-pill);
}
.ksahk-dash-menu .is-active > a{background:var(--ksahk-green-deep);color:#fff !important;box-shadow:var(--ksahk-shadow-sm)}
.ksahk-dash-menu .is-active > a .ksahk-dash-menu-icon{color:var(--ksahk-highlight,#8ed0a9)}
.ksahk-dash-menu .is-active > a .ksahk-dash-menu-badge{background:rgba(255,255,255,.22);color:#fff}
.ksahk-dash-menu .woocommerce-MyAccount-navigation-link--customer-logout a{color:#b7402a !important}
.ksahk-dash-menu .woocommerce-MyAccount-navigation-link--customer-logout a:hover{background:#fbe6df}
.ksahk-dash-menu .woocommerce-MyAccount-navigation-link--customer-logout .ksahk-dash-menu-icon{color:#b7402a}
.ksahk-dash-support{
background:linear-gradient(160deg,var(--ksahk-green-deep),#0d2f1d);
border-radius:var(--ksahk-radius);padding:18px;color:#fff;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-dash-support h4{margin:0 0 6px;font-size:13.5px;font-weight:800;color:#fff}
.ksahk-dash-support p{margin:0 0 12px;font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.8)}
.ksahk-dash-support a{
display:block;text-align:center;background:#fff;color:var(--ksahk-green-deep) !important;
font-weight:800;font-size:12.5px;padding:9px;border-radius:var(--ksahk-radius-sm);text-decoration:none;
}
/* ---- Shared card ---- */
.ksahk-dash-card{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:20px;
}
.ksahk-dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ksahk-dash-card-head h3{margin:0;font-size:14px;font-weight:800}
.ksahk-dash-tag{font-size:11px;background:var(--ksahk-cream);border:1px solid var(--ksahk-line);color:var(--ksahk-ink-soft);padding:2px 9px;border-radius:var(--ksahk-radius-pill)}
.ksahk-dash-link{font-size:12.5px;font-weight:700;color:var(--ksahk-green-deep) !important;text-decoration:none}
.ksahk-dash-link:hover{text-decoration:underline}
/* ---- Greeting ---- */
.ksahk-dash-hero{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:22px;position:relative;overflow:hidden;
}
.ksahk-dash-hero::after{
content:'';position:absolute;right:-90px;bottom:-90px;width:230px;height:230px;border-radius:50%;
/* A ::after is the last child, so with z-index:auto it paints on top of the
positioned content before it — which buried the edit button. */
background:var(--ksahk-green-accent);pointer-events:none;z-index:0;
}
.ksahk-dash-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-bottom:16px;border-bottom:1px solid var(--ksahk-line);position:relative;z-index:1}
.ksahk-dash-hero-who{display:flex;align-items:center;gap:13px;min-width:0}
.ksahk-dash-hero-avatar{
width:52px;height:52px;flex:0 0 auto;border-radius:var(--ksahk-radius-sm);
background:var(--ksahk-green-deep);color:#fff;font-weight:800;font-size:18px;
display:flex;align-items:center;justify-content:center;box-shadow:var(--ksahk-shadow-sm);
}
.ksahk-dash-hero-who h2{margin:0;font-size:19px;font-weight:800}
.ksahk-dash-hero-who h2 span{color:var(--ksahk-green-deep)}
.ksahk-dash-hero-note{margin:4px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-dash-hero-note a{color:var(--ksahk-green-deep) !important;font-weight:700}
.ksahk-dash-hero-edit{
display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);
color:var(--ksahk-green-deep) !important;font-size:12.5px;font-weight:700;text-decoration:none;
padding:9px 15px;border-radius:var(--ksahk-radius-sm);
}
.ksahk-dash-hero-edit:hover{background:var(--ksahk-green-light)}
.ksahk-dash-hero-edit svg{width:14px;height:14px}
.ksahk-dash-hero-intro{margin:14px 0 0;font-size:13px;line-height:1.85;color:var(--ksahk-ink-soft);position:relative;z-index:1;max-width:640px}
.ksahk-dash-hero-intro a{color:var(--ksahk-green-deep) !important;font-weight:700}
/* ---- Stat tiles ---- */
.ksahk-dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.ksahk-dash-stat{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:15px;display:flex;align-items:center;gap:12px;
}
.ksahk-dash-stat.is-highlight{border-color:var(--ksahk-green-light);background:linear-gradient(140deg,#fff,var(--ksahk-green-accent))}
.ksahk-dash-stat-icon{
width:38px;height:38px;flex:0 0 auto;border-radius:var(--ksahk-radius-sm);
background:var(--ksahk-green-accent);color:var(--ksahk-green-deep);
display:flex;align-items:center;justify-content:center;
}
.ksahk-dash-stat.is-highlight .ksahk-dash-stat-icon{background:var(--ksahk-green-deep);color:#fff}
.ksahk-dash-stat-icon svg{width:18px;height:18px}
.ksahk-dash-stat-body{min-width:0}
.ksahk-dash-stat-label{display:block;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-dash-stat-body strong{display:block;font-size:16px;font-weight:800;margin-top:1px}
.ksahk-dash-stat-body strong .woocommerce-Price-amount{font-size:16px}
/* ---- Latest order ---- */
.ksahk-dash-latest-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-bottom:15px;border-bottom:1px solid var(--ksahk-line);margin-bottom:15px}
.ksahk-dash-kicker{
display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
background:var(--ksahk-green-accent);color:var(--ksahk-green-deep);
padding:3px 10px;border-radius:var(--ksahk-radius-pill);
}
.ksahk-dash-latest-idline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.ksahk-dash-latest-idline h3{margin:0;font-size:17px;font-weight:800}
.ksahk-dash-latest-date{margin:5px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-dash-chip{
display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 11px;
border-radius:var(--ksahk-radius-pill);background:var(--ksahk-green-light);
color:var(--ksahk-green-deep);border:1px solid #c9e3d3;
}
.ksahk-dash-chip.is-quiet{background:var(--ksahk-cream);border-color:var(--ksahk-line);color:var(--ksahk-ink-soft)}
.ksahk-dash-btn{
display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
background:var(--ksahk-green-deep);color:#fff !important;font-size:12.5px;font-weight:700;
padding:10px 16px;border-radius:var(--ksahk-radius-sm);text-decoration:none;
}
.ksahk-dash-btn:hover{background:var(--ksahk-green)}
.ksahk-dash-btn svg{width:14px;height:14px}
.ksahk-dash-latest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.ksahk-dash-panel{background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);padding:12px;min-width:0}
.ksahk-dash-panel-label{display:block;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-dash-panel > strong{display:block;font-size:13px;font-weight:700;margin-top:3px}
.ksahk-dash-panel-total{font-size:17px !important;color:var(--ksahk-green-deep)}
.ksahk-dash-panel-total .woocommerce-Price-amount{font-size:17px}
.ksahk-dash-panel-sub{display:block;margin-top:4px;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-dash-mini-item{display:flex;align-items:flex-start;gap:10px;min-width:0}
.ksahk-dash-mini-thumb{width:42px;height:42px;flex:0 0 auto;border-radius:var(--ksahk-radius-sm);overflow:hidden;background:#fff;border:1px solid var(--ksahk-line)}
.ksahk-dash-mini-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ksahk-dash-mini-item strong{display:block;font-size:12.5px;font-weight:700}
.ksahk-dash-mini-item em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--ksahk-green-deep);margin-top:2px}
.ksahk-dash-more{display:block;font-size:11px;color:var(--ksahk-ink-soft);margin-top:2px}
.ksahk-dash-paytag{display:inline-block;margin-top:6px;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-dash-paytag.is-paid{background:var(--ksahk-green-accent);border:1px solid var(--ksahk-green-light);color:var(--ksahk-green-deep);padding:2px 9px;border-radius:var(--ksahk-radius-pill)}
/* ---- Address + account details ---- */
.ksahk-dash-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ksahk-dash-address{background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);
padding:13px;font-size:12.5px;line-height:1.85;margin-bottom:12px}
.ksahk-dash-address address{font-style:normal;margin:0}
.ksahk-dash-fields{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.ksahk-dash-fields li{background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);padding:10px 12px;min-width:0}
.ksahk-dash-fields span{display:block;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-dash-fields strong{display:block;font-size:12.5px;font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
/* ---- Recent orders table ---- */
.ksahk-dash-table-wrap{overflow-x:auto}
.ksahk-dash-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ksahk-dash-table th{
text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;
color:var(--ksahk-ink-soft);font-weight:700;padding:9px 12px;
background:var(--ksahk-cream);border-bottom:1px solid var(--ksahk-line);white-space:nowrap;
}
.ksahk-dash-table td{padding:12px;border-bottom:1px solid var(--ksahk-line);vertical-align:middle}
.ksahk-dash-table tr:last-child td{border-bottom:none}
.ksahk-dash-table-id{font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-dash-table-right{text-align:right}
.ksahk-dash-table td a{color:var(--ksahk-green-deep) !important;font-weight:700;text-decoration:none;white-space:nowrap}
.ksahk-dash-table td a:hover{text-decoration:underline}
@media (max-width:960px){
.ksahk-dash{grid-template-columns:1fr}
}
@media (max-width:600px){
.ksahk-dash-hero-edit{width:100%;justify-content:center}
.ksahk-dash-btn{width:100%;justify-content:center}
}
/* ==========================================================================
ACCOUNT — ORDERS LIST
========================================================================== */
.ksahk-orders{display:flex;flex-direction:column;gap:20px}
.ksahk-orders-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ksahk-orders-head h1{margin:0;font-size:clamp(20px,2.6vw,27px);font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-head p{margin:4px 0 0;font-size:12.5px;color:var(--ksahk-ink-soft)}
.ksahk-orders-count{
display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);
padding:7px 14px;border-radius:var(--ksahk-radius-pill);font-size:12px;color:var(--ksahk-ink-soft);
}
.ksahk-orders-count strong{color:var(--ksahk-green-deep);font-weight:800}
.ksahk-orders-dot{width:9px;height:9px;border-radius:50%;background:var(--ksahk-green)}
/* ---- Toolbar ---- */
.ksahk-orders-toolbar{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:12px;display:flex;flex-direction:column;gap:11px;
}
.ksahk-orders-search{display:flex;align-items:center;gap:9px;background:var(--ksahk-cream);
border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);padding:0 12px}
.ksahk-orders-search:focus-within{border-color:var(--ksahk-green);box-shadow:0 0 0 3px var(--ksahk-green-light)}
.ksahk-orders-search svg{width:15px;height:15px;flex:0 0 auto;color:var(--ksahk-ink-soft)}
.ksahk-orders .ksahk-orders-search input{
border:none !important;background:transparent !important;box-shadow:none !important;
padding:10px 0 !important;font-size:13px;width:100%;min-width:0;
}
.ksahk-orders .ksahk-orders-search input:focus{outline:none;box-shadow:none !important}
.ksahk-orders-pills{display:flex;gap:7px;flex-wrap:wrap}
.ksahk-orders-pill{
display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
border-radius:var(--ksahk-radius-pill);background:var(--ksahk-cream);
border:1px solid var(--ksahk-line);color:var(--ksahk-ink) !important;
font-size:12.5px;font-weight:600;text-decoration:none;transition:background-color .15s ease;
}
.ksahk-orders-pill:hover{background:var(--ksahk-green-accent)}
.ksahk-orders-pill span{
background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-pill);
font-size:11px;font-weight:700;padding:1px 7px;
}
.ksahk-orders-pill.is-on{background:var(--ksahk-green-deep);border-color:var(--ksahk-green-deep);color:#fff !important}
.ksahk-orders-pill.is-on span{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
/* ---- Highlighted active order ---- */
.ksahk-orders-live{
background:#fff;border:1px solid var(--ksahk-green-light);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:20px;position:relative;overflow:hidden;
}
.ksahk-orders-live::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--ksahk-green),var(--ksahk-green-light),var(--ksahk-green))}
.ksahk-orders-live-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-bottom:14px;border-bottom:1px solid var(--ksahk-line)}
.ksahk-orders-live-idline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ksahk-orders-live-idline h2{margin:0;font-size:18px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-live-date{margin:5px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-orders-live-ship{background:var(--ksahk-cream);border:1px solid var(--ksahk-line);
border-radius:var(--ksahk-radius-sm);padding:8px 14px;text-align:right}
.ksahk-orders-live-ship span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--ksahk-ink-soft);font-weight:700}
.ksahk-orders-live-ship strong{display:block;font-size:12.5px;margin-top:2px}
.ksahk-orders-live-body{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
background:var(--ksahk-cream);border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius-sm);
padding:13px;margin:14px 0}
.ksahk-orders-live-item{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 260px}
.ksahk-orders-tagline{display:inline-block;font-size:9.5px;font-weight:700;background:var(--ksahk-green-light);
color:var(--ksahk-green-deep);padding:2px 7px;border-radius:4px;margin-bottom:3px}
.ksahk-orders-live-item h4{margin:0;font-size:14px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-live-item p{margin:3px 0 0;font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-orders-live-price{text-align:right;flex:0 0 auto}
.ksahk-orders-live-price span{display:block;font-size:11px;color:var(--ksahk-ink-soft)}
.ksahk-orders-live-price strong{display:block;font-size:21px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-live-price strong .woocommerce-Price-amount{font-size:21px}
.ksahk-orders-live-price em{display:block;font-style:normal;font-size:11px;color:var(--ksahk-ink-soft);margin-top:2px}
.ksahk-orders-live-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ksahk-orders-mini-steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ksahk-orders-mini-steps li{display:flex;align-items:center;gap:6px}
.ksahk-orders-mini-steps li > span{width:11px;height:11px;border-radius:50%;background:var(--ksahk-line);display:block}
.ksahk-orders-mini-steps li.is-done > span{background:var(--ksahk-green)}
.ksahk-orders-mini-steps li.is-now > span{background:var(--ksahk-green-deep);box-shadow:0 0 0 4px var(--ksahk-green-light)}
.ksahk-orders-mini-steps em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ksahk-green-deep)}
.ksahk-orders-live-actions{display:flex;gap:9px;flex-wrap:wrap}
.ksahk-orders-btn{
display:inline-flex;align-items:center;gap:7px;background:var(--ksahk-green-deep);
color:#fff !important;font-size:12.5px;font-weight:700;padding:10px 17px;
border-radius:var(--ksahk-radius-pill);text-decoration:none;
}
.ksahk-orders-btn:hover{background:var(--ksahk-green)}
.ksahk-orders-btn svg{width:14px;height:14px}
.ksahk-orders-btn.is-ghost{background:var(--ksahk-cream);color:var(--ksahk-ink) !important;border:1px solid var(--ksahk-line)}
.ksahk-orders-btn.is-ghost:hover{border-color:var(--ksahk-green)}
/* ---- Chips ---- */
.ksahk-orders-chip{
display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:3px 11px;
border-radius:var(--ksahk-radius-pill);white-space:nowrap;
background:var(--ksahk-green-light);color:var(--ksahk-green-deep);border:1px solid #c9e3d3;
}
.ksahk-orders-chip.is-done{background:var(--ksahk-green-accent);border-color:var(--ksahk-green-light)}
.ksahk-orders-chip.is-void{background:var(--ksahk-watermelon-soft);color:#a32744;border-color:#f4c4d1}
/* ---- Table ---- */
.ksahk-orders-table-card{background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);overflow:hidden}
.ksahk-orders-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:15px 18px;border-bottom:1px solid var(--ksahk-line);background:var(--ksahk-cream)}
.ksahk-orders-table-head h3{margin:0;font-size:14px;font-weight:800}
.ksahk-orders-table-head span{font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-orders-table-wrap{overflow-x:auto}
.ksahk-orders-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:0}
.ksahk-orders-table th{
text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;
color:var(--ksahk-ink-soft);padding:10px 14px;background:var(--ksahk-cream);
border-bottom:1px solid var(--ksahk-line);white-space:nowrap;
}
.ksahk-orders-table td{padding:13px 14px;border-bottom:1px solid var(--ksahk-line);vertical-align:middle}
.ksahk-orders-table tbody tr:last-child td{border-bottom:none}
.ksahk-orders-table tbody tr:hover{background:var(--ksahk-cream)}
.ksahk-orders-right{text-align:right}
.ksahk-orders-id{display:block;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-sub{display:block;font-size:10.5px;color:var(--ksahk-ink-soft);margin-top:2px}
.ksahk-orders-cellitem{display:flex;align-items:center;gap:10px;min-width:0}
.ksahk-orders-thumb{width:34px;height:34px;flex:0 0 auto;border-radius:var(--ksahk-radius-sm);
overflow:hidden;background:var(--ksahk-green-accent);display:block}
.ksahk-orders-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ksahk-orders-thumb-lg{width:56px;height:56px}
.ksahk-orders-itemname{display:block;font-weight:700;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksahk-orders-total{font-weight:800}
.ksahk-orders-total.is-void{text-decoration:line-through;color:var(--ksahk-ink-soft);font-weight:600}
.ksahk-orders-mini{
display:inline-block;font-size:11.5px;font-weight:700;padding:5px 11px;margin-left:5px;
border-radius:var(--ksahk-radius-pill);background:var(--ksahk-cream);
border:1px solid var(--ksahk-line);color:var(--ksahk-ink) !important;text-decoration:none;white-space:nowrap;
}
.ksahk-orders-mini:hover{border-color:var(--ksahk-green)}
.ksahk-orders-mini.is-accent{background:var(--ksahk-green-accent);border-color:var(--ksahk-green-light);color:var(--ksahk-green-deep) !important}
.ksahk-orders-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;
border-top:1px solid var(--ksahk-line);background:var(--ksahk-cream)}
.ksahk-orders-pagenow{font-size:11.5px;color:var(--ksahk-ink-soft)}
.ksahk-orders-empty{background:#fff;border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);
box-shadow:var(--ksahk-shadow-sm);padding:38px 22px;text-align:center}
.ksahk-orders-empty h3{margin:0 0 6px;font-size:15px;font-weight:800}
.ksahk-orders-empty p{margin:0 0 16px;font-size:12.5px;color:var(--ksahk-ink-soft)}
/* ---- Assurance strip ---- */
.ksahk-orders-assure{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ksahk-orders-assure > div{display:flex;align-items:flex-start;gap:11px;background:var(--ksahk-cream);
border:1px solid var(--ksahk-line);border-radius:var(--ksahk-radius);padding:14px}
.ksahk-orders-assure > div > span{font-size:20px;line-height:1;flex:0 0 auto}
.ksahk-orders-assure h4{margin:0;font-size:12.5px;font-weight:800;color:var(--ksahk-green-deep)}
.ksahk-orders-assure p{margin:3px 0 0;font-size:11px;line-height:1.65;color:var(--ksahk-ink-soft)}
@media (max-width:600px){
.ksahk-orders-live-price{text-align:left}
.ksahk-orders-live-actions{width:100%}
.ksahk-orders-live-actions .ksahk-orders-btn{flex:1;justify-content:center}
.ksahk-orders-itemname{max-width:150px}
}