/* ========================================================================== Savalan Kebab — Native menu / shop page. Depends on design-system.css tokens. ========================================================================== */ /* Top padding clears the theme's absolute overlay header (JS sets --svk-hdr-init to the exact height; the defaults below avoid a pre-JS flash). */ /* Xtra theme has no global border-box — enforce it on our menu components. */ .svk-shop, .svk-shop *, .svk-menu-tabs, .svk-menu-tabs *{box-sizing:border-box} .svk-shop{max-width:var(--svk-page);margin:0 auto;padding:var(--svk-hdr-init,84px) var(--svk-gutter) 80px;font-family:var(--f-body)} @media (min-width:1025px){.svk-shop{padding-top:var(--svk-hdr-init,210px)}} /* Sticky tabs sit just under the theme header at the top; the header scrolls away, so top:0 keeps them pinned to the viewport once scrolled. */ /* ---- Hero (Redesign 2026: calm Space Grotesk display, forest eyebrow) ---- */ .svk-shop__hero{text-align:center;padding:44px 16px 34px} .svk-shop__eyebrow{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.05em;font-size:14px; font-weight:700;color:var(--sg-forest);margin:0 0 12px} .svk-shop__title{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,6vw,64px);color:var(--sg-ink); margin:0;line-height:.95;letter-spacing:-.01em} .svk-shop__intro{font-family:var(--f-body);font-size:17px;line-height:1.5;color:var(--sg-forest);max-width:60ch;margin:16px auto 0} /* The Codevz `.layout_` wrapper sets overflow:hidden, which silently breaks position:sticky for our tabs. Re-enable overflow on the menu page only. */ body.woocommerce-shop .layout_, body.post-type-archive-product .layout_{overflow:visible !important} /* Same trap one level up, but ONLY on small screens — which is why the tabs stuck on desktop yet scrolled away on mobile. The theme sets body{overflow-x:hidden} there; per spec that forces the other axis to compute to `auto`, making a scroll container, and a scroll-container ancestor silently disables position:sticky. `clip` stops horizontal scrolling the same way but does NOT create a scroll container — paired with an explicit overflow-y:visible so it isn't coerced back to hidden. */ body.woocommerce-shop, body.post-type-archive-product{overflow-x:clip !important;overflow-y:visible !important} /* ---- Sticky category tabs (Redesign 2026: forest text, flame pill w/ ink) ---- */ .svk-menu-tabs{position:sticky;top:0;z-index:40;background:var(--sg-cream); margin:0 -20px 12px;padding:0 8px;border-bottom:1px solid var(--sg-line)} .svk-menu-tabs__track{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:12px 12px;scroll-behavior:smooth} .svk-menu-tabs__track::-webkit-scrollbar{display:none} .svk-menu-tabs__tab{flex:0 0 auto;font-family:var(--f-body);font-weight:700;font-size:14px; color:var(--sg-forest);text-decoration:none;padding:9px 16px;border-radius:var(--r-full); white-space:nowrap;transition:color .15s var(--ease),background .15s var(--ease)} .svk-menu-tabs__tab:hover{color:var(--sg-ink);background:var(--sg-sage)} .svk-menu-tabs__tab.is-active{color:var(--sg-ink);background:var(--sg-flame)} /* Logged-in admin bar: keep sticky tabs below it */ .admin-bar .svk-menu-tabs{top:32px} @media screen and (max-width:782px){.admin-bar .svk-menu-tabs{top:46px}} /* ---- Sections (Redesign 2026: calm display headings, hairline rule) ---- */ .svk-menu__section{scroll-margin-top:78px;padding:34px 0 8px} .svk-menu__heading{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3vw,34px);color:var(--sg-ink); margin:0 0 20px;display:flex;align-items:center;gap:16px;line-height:1;letter-spacing:-.01em} .svk-menu__heading::after{content:"";flex:1;height:1px;background:var(--sg-line)} .svk-menu__empty{text-align:center;color:var(--sg-forest);padding:60px 0} /* ---- Grid ---- */ .svk-menu__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px} /* ---- Header product-search results (no category sections, just a flat grid) ---- */ .svk-menu__grid--search{padding:6px 0 52px} .svk-shop__noresults{text-align:center;max-width:520px;margin:0 auto;padding:16px 16px 72px} .svk-shop__noresults-t{font-family:var(--f-head);font-weight:700;font-size:21px;color:var(--sg-ink);margin:0 0 8px} .svk-shop__noresults-p{font-size:16px;line-height:1.5;color:var(--sg-forest);margin:0 0 26px} .svk-shop__backlink{text-align:center;margin:8px 0 56px} .svk-shop__backlink a{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--sg-forest);text-decoration:none} .svk-shop__backlink a:hover{color:var(--sg-flame)} /* ---- Card (Redesign 2026: borderless, photo-forward, soft lift) ---- */ .svk-menu-card{display:flex;flex-direction:column;background:#fff;border:none; border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-card); transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .svk-menu-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(14,21,14,.30)} .svk-menu-card__media{display:block;aspect-ratio:4/3;background:var(--sg-sand);overflow:hidden} .svk-menu-card__media img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .4s var(--ease)} .svk-menu-card:hover .svk-menu-card__media img{transform:scale(1.04)} .svk-menu-card__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1} .svk-menu-card__title{font-family:var(--f-body);font-weight:700;font-size:16px;line-height:1.25;margin:0;color:var(--sg-ink)} .svk-menu-card__title a{color:inherit;text-decoration:none} .svk-menu-card__title a:hover{color:var(--sg-forest)} .svk-menu-card__desc{font-family:var(--f-body);font-size:13px;line-height:1.5;color:var(--sg-forest);margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .svk-menu-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px} .svk-menu-card__price{font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--sg-ink); font-variant-numeric:tabular-nums} .svk-menu-card__price del{color:var(--surface-500);font-weight:400;margin-right:4px} .svk-menu-card__price ins{text-decoration:none;color:var(--sg-forest)} .svk-menu-card__add,.svk-menu-card__choose{flex:0 0 auto;height:36px;padding:0 18px;font-size:13px;text-decoration:none; display:inline-flex;align-items:center;line-height:1} .svk-menu-card__add.loading{opacity:.7;pointer-events:none} /* After an ajax add, the theme/WooLentor JS hides the button (inline display:none) and shows a "View cart" link. We hide that link (we have the drawer) and force the Add button to stay visible — customers can keep adding; the drawer badge + toast are the "added" feedback. The !important beats the JS inline style. */ .svk-menu-card__add.added{display:inline-flex !important} .svk-menu-card__foot .added_to_cart{display:none !important} /* ---- Responsive ---- */ @media (max-width:600px){ .svk-menu__grid{grid-template-columns:1fr 1fr;gap:12px} .svk-menu-card__body{padding:10px 12px 12px} .svk-menu-card__title{font-size:14px} .svk-menu-card__add,.svk-menu-card__choose{padding:0 12px;height:34px} } @media (max-width:380px){ .svk-menu__grid{grid-template-columns:1fr} }