/*
Theme Name: SuperJojo Static Header
Theme URI: https://superjojodiy.com/
Author: Custom Theme
Description: Lightweight responsive WordPress starter theme with a Shopify-inspired static header and reusable base styles.
Version: 1.1.0
Text Domain: superjojo-static
*/

:root {
  --sj-bg: #fffaf3;
  --sj-surface: #ffffff;
  --sj-text: #302e2d;
  --sj-muted: #6d6865;
  --sj-border: #ded9d3;
  --sj-accent: #454140;
  --sj-accent-hover: #252322;
  --sj-radius: 6px;
  --sj-container: 1440px;
  --sj-font: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sj-surface); color: var(--sj-text); font-family: var(--sj-font); font-size: 16px; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--sj-accent-hover); }
button, input, select, textarea { font: inherit; }

.sj-container { width: min(100% - 40px, var(--sj-container)); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.announcement-bar { min-height: 43px; display: grid; place-items: center; padding: 10px 20px; color: #fff; background: var(--sj-accent); border-bottom: 1px solid rgba(255,255,255,.16); text-align: center; font-size: 14px; line-height: 1.5; }
.announcement-bar p { margin: 0; }

.site-header { position: sticky; z-index: 100; top: 0; background: var(--sj-bg); border-bottom: 1px solid rgba(48,46,45,.08); transition: box-shadow .28s ease; }
.admin-bar .site-header { top: 32px; }
.header-inner { min-height: 117px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; transition: min-height .32s cubic-bezier(.22,.61,.36,1); }
.primary-nav ul, .header-actions { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.primary-nav a { color: #5d5855; font-size: 14px; text-decoration: none; transition: color .2s ease; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #111; }
.site-branding { justify-self: center; }
.site-logo, .site-branding img { width: 104px; height: 104px; aspect-ratio: 1; object-fit: contain; transition: width .32s cubic-bezier(.22,.61,.36,1), height .32s cubic-bezier(.22,.61,.36,1); }
.header-actions { justify-content: flex-end; gap: 21px; }
.header-action { display: inline-grid; place-items: center; min-width: 26px; min-height: 36px; color: #272422; text-decoration: none; border: 0; background: transparent; cursor: pointer; }
.header-action:hover { color: #8a6650; }
.header-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.currency { position: relative; display: inline-flex; align-items: center; font-size: 13px; }
.currency__toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0; color: #272422; background: transparent; border: 0; cursor: pointer; }
.currency__toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s ease; }
.currency.is-open .currency__toggle svg { transform: rotate(180deg); }
.currency__menu { position: absolute; z-index: 120; top: calc(100% + 13px); right: 0; width: 250px; padding: 10px; background: var(--sj-bg); border: 1px solid rgba(48,46,45,.08); border-radius: 16px; box-shadow: 0 15px 38px rgba(45,38,33,.16); }
.currency__search { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 7px; height: 43px; margin: 0 0 3px; padding: 0 10px; background: rgba(255,255,255,.72); border-radius: 9px; }
.currency__search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.currency__search input[type="search"] { height: 42px; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; }
.currency__list { display: grid; gap: 4px; max-height: 330px; overflow-y: auto; padding: 0 5px 2px 0; scrollbar-color: #8e8a86 transparent; scrollbar-width: thin; }
.currency__list::-webkit-scrollbar { width: 5px; }
.currency__list::-webkit-scrollbar-track { background: transparent; }
.currency__list::-webkit-scrollbar-thumb { background: #8e8a86; border-radius: 999px; }
.currency__list::-webkit-scrollbar-thumb:hover { background: #5f5a56; }
.currency__list button { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 8px 11px; color: #57514d; background: transparent; border: 0; border-radius: 8px; text-align: left; transform: none; }
.currency__list button:hover, .currency__list button.is-selected { color: #fff; background: #000; transform: none; }
.currency__list button small { color: inherit; opacity: .65; }
.currency__feedback { min-height: 0; margin: 4px 7px 0; color: #9a3232; font-size: 11px; line-height: 1.35; }
.currency.is-loading .currency__list { opacity: .45; pointer-events: none; }
.mobile-menu-toggle { display: none; }
.site-header.is-compact { box-shadow: 0 6px 24px rgba(42,37,33,.08); }
.site-header.is-compact .header-inner { min-height: 72px; }
.site-header.is-compact .site-logo,
.site-header.is-compact .site-branding img { width: 62px; height: 62px; }

body.sj-search-open { overflow: hidden; }
.sj-search-modal[hidden] { display: none !important; }
.sj-search-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px 20px; opacity: 0; transition: opacity .22s ease; }
.sj-search-modal.is-open { opacity: 1; }
.sj-search-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; background: rgba(36,32,29,.48); border: 0; border-radius: 0; cursor: default; transform: none; }
.sj-search-dialog { position: relative; width: min(100%, 720px); max-height: calc(100vh - clamp(68px, 16vh, 176px)); overflow: hidden; background: var(--sj-bg); border: 1px solid rgba(48,46,45,.12); border-radius: 18px; box-shadow: 0 22px 65px rgba(0,0,0,.2); transform: translateY(-12px) scale(.985); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.sj-search-modal.is-open .sj-search-dialog { transform: translateY(0) scale(1); }
.sj-search-dialog__bar { display: grid; grid-template-columns: 24px minmax(0,1fr) 40px; align-items: center; gap: 10px; min-height: 62px; padding: 0 12px 0 18px; border-bottom: 1px solid #e4dfd9; }
.sj-search-dialog__bar > svg,
.sj-search-dialog__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sj-search-dialog__bar input[type="search"] { min-width: 0; height: 60px; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 16px; }
.sj-search-dialog__bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.sj-search-dialog__close { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; color: #373330; background: transparent; border: 0; border-radius: 50%; cursor: pointer; transform: none; }
.sj-search-dialog__close:hover { color: #fff; background: #000; transform: none; }
.sj-search-dialog__body { max-height: calc(100vh - clamp(132px, 16vh, 240px)); padding: 18px 20px 24px; overflow-y: auto; }
.sj-search-dialog__heading { margin-bottom: 12px; color: #5f5955; font-size: 14px; }
.sj-search-results { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px 15px; }
.sj-search-product { display: grid; grid-template-rows: auto auto auto; align-content: start; min-width: 0; color: #4c4743; text-decoration: none; }
.sj-search-product img { width: 100%; aspect-ratio: 1 / 1.16; object-fit: cover; background: #eee9e3; }
.sj-search-product__name { margin-top: 8px; overflow: hidden; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.sj-search-product__price { color: #5e5955; font-size: 13px; }
.sj-search-product__price del { color: #99918b; margin-right: 4px; }
.sj-search-product:hover .sj-search-product__name { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.sj-search-status { min-height: 22px; margin: 16px 0 0; color: #77716c; font-size: 13px; }

.header-cart { position: relative; }
.header-cart__count { position: absolute; top: 0; right: -5px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; color: #fff; background: #000; border-radius: 999px; font-size: 9px; line-height: 1; }
.sj-auth-modal[hidden], .sj-cart-drawer[hidden], .sj-quick-modal[hidden] { display: none !important; }
.sj-auth-modal, .sj-cart-drawer, .sj-quick-modal { position: fixed; z-index: 1001; inset: 0; opacity: 0; transition: opacity .22s ease; }
.sj-auth-modal.is-open, .sj-cart-drawer.is-open, .sj-quick-modal.is-open { opacity: 1; }
.sj-layer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; background: rgba(36,32,29,.48); border: 0; border-radius: 0; cursor: default; transform: none; }
.sj-layer-close { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; color: #34302e; background: transparent; border: 0; border-radius: 50%; transform: none; }
.sj-layer-close:hover { color: #fff; background: #000; transform: none; }
.sj-layer-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sj-auth-modal { display: grid; place-items: center; padding: 20px; }
.sj-auth-dialog { position: relative; width: min(100%, 460px); padding: 30px; background: var(--sj-bg); border-radius: 18px; box-shadow: 0 22px 65px rgba(0,0,0,.2); transform: translateY(12px) scale(.985); transition: transform .25s ease; }
.sj-auth-modal.is-open .sj-auth-dialog { transform: none; }
.sj-auth-dialog > .sj-layer-close { position: absolute; top: 14px; right: 14px; }
.sj-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 46px 26px 0; padding: 4px; background: #eeeae5; border-radius: 10px; }
.sj-auth-tabs button { min-height: 40px; padding: 6px 12px; color: #4b4744; background: transparent; border: 0; border-radius: 8px; transform: none; }
.sj-auth-tabs button.is-active { color: #fff; background: #000; }
.sj-auth-form { display: grid; gap: 16px; }
.sj-auth-form label { margin: 0; color: #4e4945; font-size: 13px; }
.sj-auth-form input { margin-top: 6px; height: 50px; border-radius: 10px; }
.sj-auth-submit { width: 100%; min-height: 50px !important; color: #fff !important; background: #000 !important; border-color: #000 !important; border-radius: 10px !important; }
.sj-auth-feedback { min-height: 20px; margin: 0; color: #8e2f2f; font-size: 13px; text-align: center; }
.sj-cart-panel { position: absolute; top: 0; right: 0; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(92vw, 430px); height: 100%; background: var(--sj-bg); box-shadow: -12px 0 45px rgba(0,0,0,.16); transform: translateX(100%); transition: transform .34s cubic-bezier(.22,.61,.36,1); }
.sj-cart-drawer.is-open .sj-cart-panel { transform: translateX(0); }
.sj-cart-panel__header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 12px 20px 12px 26px; border-bottom: 1px solid #e3ded8; }
.sj-cart-panel__header h2 { margin: 0; font-size: 23px; font-weight: 400; }
.sj-cart-panel__content { padding: 24px 26px 28px; overflow-y: auto; }
.sj-cart-skeleton { display: grid; gap: 18px; }
.sj-cart-skeleton__item { display: grid; grid-template-columns: 82px 1fr; gap: 14px; }
.sj-cart-skeleton__item i, .sj-cart-skeleton__item b { display: block; background: linear-gradient(100deg,#e8e3dd 20%,#f7f3ee 40%,#e8e3dd 60%); background-size: 220% 100%; animation: sjp-skeleton 1.2s linear infinite; }
.sj-cart-skeleton__item i { height: 100px; border-radius: 8px; }
.sj-cart-skeleton__item span { display: grid; align-content: start; gap: 10px; padding-top: 8px; }
.sj-cart-skeleton__item b { width: 100%; height: 12px; border-radius: 4px; }
.sj-cart-skeleton__item b:nth-child(2) { width: 64%; }
.sj-cart-skeleton__item b:nth-child(3) { width: 42%; }
.sj-drawer-items { display: grid; gap: 18px; }
.sj-drawer-item { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 14px; color: #393532; text-decoration: none; }
.sj-drawer-item__image img { width: 82px !important; height: 100px !important; object-fit: cover; border-radius: 8px; }
.sj-drawer-item__copy { display: grid; align-content: center; gap: 4px; min-width: 0; }
.sj-drawer-item__copy strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sj-drawer-item__copy small { color: #77716d; font-size: 12px; }
.sj-drawer-item__copy small dl { margin: 0; }
.sj-drawer-item__copy small dt, .sj-drawer-item__copy small dd { display: inline; margin: 0 3px 0 0; }
.sj-drawer-item__copy > span { font-size: 13px; }
.sj-drawer-total { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 20px; border-top: 1px solid #ded9d3; font-size: 16px; }
.sj-drawer-note { margin: 8px 0 20px; color: #77716d; font-size: 12px; }
.sj-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sj-drawer-actions a, .sj-drawer-empty a { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #282522; border: 1px solid #282522; border-radius: 10px; text-decoration: none; }
.sj-drawer-actions a.is-primary { color: #fff; background: #000; }
.sj-drawer-empty { display: grid; place-items: center; min-height: 55vh; text-align: center; }
.sj-drawer-empty p { margin: 0; font-size: 18px; }
.sj-drawer-empty a { min-width: 190px; padding: 0 20px; }
.sj-cart-error { padding: 16px; color: #8e2f2f; background: #fff; border-radius: 8px; }

.sj-quick-modal { display: grid; place-items: center; padding: 22px; }
.sj-quick-dialog { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 44px); overflow: hidden; background: var(--sj-bg); border-radius: 18px; box-shadow: 0 25px 70px rgba(0,0,0,.24); transform: translateY(14px) scale(.985); transition: transform .25s ease; }
.sj-quick-modal.is-open .sj-quick-dialog { transform: none; }
.sj-quick-close { position: absolute; z-index: 8; top: 12px; right: 12px; background: rgba(255,255,255,.92); }
.sj-quick-content { max-height: calc(100vh - 44px); overflow-y: auto; }
.sj-quick-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); min-height: 610px; }
.sj-quick-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; align-content: start; background: #e5e0da; }
.sj-quick-image { display: block; width: 100%; min-height: 0; padding: 0; background: #eeeae5; border: 0; border-radius: 0; transform: none; }
.sj-quick-image:hover { background: #eeeae5; transform: none; }
.sj-quick-image img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: contain; background: #fff; }
.sj-quick-gallery.is-single { grid-template-columns: 1fr; }
.sj-quick-gallery.is-single .sj-quick-image img { aspect-ratio: 1 / 1; }
.sj-quick-summary { align-self: start; position: sticky; top: 0; padding: 54px 42px 38px; }
.sj-quick-summary h2 { margin: 0 45px 8px 0; font-size: 29px; font-weight: 400; }
.sj-quick-price { margin-bottom: 25px; font-size: 14px; }
.sj-quick-options { margin: 0 0 20px; padding: 0; border: 0; }
.sj-quick-options legend { margin-bottom: 9px; font-size: 13px; }
.sj-quick-options > div { display: grid; grid-template-columns: repeat(var(--sjp-option-columns, 1), minmax(0, 1fr)); gap: 8px; }
.sj-quick-options button { position: relative; width: 100%; min-height: 46px; overflow: hidden; padding: 9px 16px; color: #333; background: #fff; border: 1px solid #d9d4ce; border-radius: 11px; transform: none; }
.sj-quick-options button::before, .sj-quick-add::before { position: absolute; inset: 0; background: #000; content: ''; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.sj-quick-options button span, .sj-quick-add span { position: relative; z-index: 1; }
.sj-quick-options button:hover, .sj-quick-options button.is-selected { color: #fff; border-color: #000; background: #fff; transform: none; }
.sj-quick-options button:hover::before, .sj-quick-options button.is-selected::before, .sj-quick-add:hover::before { transform: scaleX(1); }
.sj-quick-purchase { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 10px; margin-top: 26px; }
.sj-quick-quantity { display: grid; grid-template-columns: 38px 1fr 38px; height: 50px; background: #fff; border: 1px solid #d9d4ce; border-radius: 11px; }
.sj-quick-quantity button { min-height: 0; padding: 0; color: #222; background: transparent; border: 0; transform: none; }
.sj-quick-quantity input[type="number"] { display: block; min-width: 0; width: 100%; height: 48px; min-height: 0; margin: 0; padding: 0; color: #222 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1; text-align: center; line-height: 48px; appearance: textfield; -moz-appearance: textfield; }
.sj-quick-quantity input[type="number"]::-webkit-inner-spin-button, .sj-quick-quantity input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.sj-quick-quantity input[type="number"]:focus { border: 0 !important; box-shadow: none !important; outline: none; }
.sj-quick-add { position: relative; min-height: 50px !important; overflow: hidden; color: #fff !important; background: #000 !important; border-color: #000 !important; border-radius: 11px !important; transform: none !important; }
.sj-quick-add::before { background: #393534; transform: scaleX(0); }
.sj-quick-add:disabled { opacity: .48; cursor: not-allowed; }
.sj-quick-add.is-loading span { opacity: 0; }
.sj-quick-add.is-loading::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; content: ''; animation: sj-spin .7s linear infinite; }
.sj-quick-feedback { min-height: 21px; margin: 9px 0 0; color: #873333; font-size: 12px; }
.sj-quick-details { display: inline-block; margin-top: 13px; color: #5e5854; font-size: 13px; }
.sj-quick-skeleton { display: grid; grid-template-columns: 58% 42%; min-height: 610px; }
.sj-quick-skeleton i, .sj-quick-skeleton b { background: linear-gradient(100deg,#e6e0d9 20%,#f8f4ef 42%,#e6e0d9 64%); background-size: 220% 100%; animation: sjp-skeleton 1.2s linear infinite; }
.sj-quick-skeleton span { display: grid; align-content: start; gap: 18px; padding: 70px 42px; }
.sj-quick-skeleton b { display: block; height: 45px; border-radius: 9px; }
.sj-quick-skeleton b:first-child { width: 72%; height: 27px; }
.sj-quick-error { padding: 80px 30px; text-align: center; }
@keyframes sj-spin { to { transform: rotate(360deg); } }

.site-main { min-height: 45vh; padding-block: 56px; }
.entry-content { width: min(100%, 860px); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .65em; line-height: 1.22; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); }
p, ul, ol, blockquote { margin-top: 0; margin-bottom: 1.25rem; }

.button, button[type="submit"], input[type="submit"] { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 20px; color: #fff; background: var(--sj-accent); border: 1px solid var(--sj-accent); border-radius: var(--sj-radius); text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.button:hover, button[type="submit"]:hover, input[type="submit"]:hover { color: #fff; background: var(--sj-accent-hover); border-color: var(--sj-accent-hover); transform: translateY(-1px); }

label { display: block; margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], input[type="url"], select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--sj-text); background: #fff; border: 1px solid var(--sj-border); border-radius: var(--sj-radius); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--sj-accent); box-shadow: 0 0 0 3px rgba(69,65,64,.12); }

.table-wrap { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 15px; }
th, td { padding: 12px 14px; border: 1px solid var(--sj-border); text-align: left; vertical-align: top; }
th { background: var(--sj-bg); font-weight: 600; }
tbody tr:nth-child(even) { background: #fcfbf9; }
tbody tr:hover { background: #f7f2ec; }

.site-footer { padding: 32px 0 26px; color: #4b4744; background: var(--sj-bg); border-top: 1px solid rgba(48,46,45,.06); font-size: 14px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.2fr); align-items: start; gap: 46px 80px; }
.site-footer__newsletter-copy h2 { margin: 0 0 3px; font-size: clamp(20px, 1.6vw, 25px); font-weight: 400; letter-spacing: -.02em; }
.site-footer__newsletter-copy p { margin: 0; font-size: 14px; }
.newsletter-form { position: relative; }
.newsletter-form input[type="email"] { width: 100%; height: 62px; padding: 14px 72px 14px 28px; background: rgba(255,255,255,.62); border: 1px solid #d8d4d0; border-radius: 999px; font-size: 14px; box-shadow: none; }
.newsletter-form input[type="email"]:focus { border-color: #77716d; box-shadow: 0 0 0 3px rgba(69,65,64,.08); }
.newsletter-form__website { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.newsletter-form__submit { position: absolute; top: 0; right: 10px; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; margin-block: auto; padding: 0; color: #35312f; background: transparent; border: 0; border-radius: 50%; line-height: 0; transform: none; cursor: pointer; }
.newsletter-form__submit:hover, .newsletter-form__submit:focus-visible { color: #fff; background: #000; outline: none; }
.newsletter-form__submit[aria-disabled="true"] { cursor: wait; opacity: .75; }
.newsletter-form__arrow { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; font-size: 0; line-height: 0; }
.newsletter-form__submit svg { display: block; width: 22px; height: 22px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.newsletter-form__spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sj-newsletter-spin .7s linear infinite; }
.newsletter-form.is-loading .newsletter-form__arrow { display: none; }
.newsletter-form.is-loading .newsletter-form__spinner { display: block; }
.newsletter-form__feedback { position: absolute; top: calc(100% + 7px); left: 24px; margin: 0; font-size: 13px; line-height: 1.4; }
.newsletter-form__feedback.is-success { color: #24723c; }
.newsletter-form__feedback.is-error { color: #b3261e; }
.site-footer__bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 80px; padding-top: 4px; color: #8c8783; font-size: 12px; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--sj-text); }
.sj-policy-menu { position: relative; justify-self: start; }
.sj-policy-menu summary { color: inherit; list-style: none; cursor: pointer; }
.sj-policy-menu summary::-webkit-details-marker { display: none; }
.sj-policy-menu summary::after { display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ''; transform: rotate(45deg); transition: transform .2s; }
.sj-policy-menu[open] summary::after { transform: rotate(225deg); }
.sj-policy-popover { position: absolute; z-index: 30; bottom: calc(100% + 12px); left: 0; display: grid; gap: 2px; width: 220px; padding: 10px; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 13px; box-shadow: 0 14px 38px rgba(45,38,33,.15); }
.sj-policy-popover a { padding: 9px 11px; color: #514b47; border-radius: 7px; }
.sj-policy-popover a:hover { color: #fff; background: #000; }
@keyframes sj-newsletter-spin { to { transform: rotate(360deg); } }

/* Reusable WooCommerce product list */
.sj-products { --sj-product-columns: 4; width: 100%; max-width: var(--sj-container); margin-inline: auto; }
.sj-products__grid { display: grid; grid-template-columns: repeat(var(--sj-product-columns), minmax(0, 1fr)); gap: clamp(18px, 2.3vw, 34px); margin: 0; padding: 0; list-style: none; }
.sj-product-card { position: relative; min-width: 0; }
.sj-product-card__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #f4f1ed; isolation: isolate; }
.elementor-widget-superjojo-products .sj-product-card__media { aspect-ratio: 1 / 1 !important; }
.sj-product-card__slides { position: relative; display: flex; width: 100%; height: 100%; transform: translate3d(calc(var(--sj-slide-index, 0) * -100%), 0, 0); transition: transform .48s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.sj-product-card__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; pointer-events: none; }
.sj-product-card__slide.is-active { pointer-events: auto; }
.sj-product-card__slide img,
.elementor .sj-product-card__slide img,
.woocommerce .sj-product-card__slide img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; object-fit: contain !important; object-position: center; background: #fff; }
.sj-product-card.has-gallery:not(.is-interacted):hover .sj-product-card__slides { transform: translate3d(-100%, 0, 0); }
.sj-product-card__link { display: block; width: 100%; height: 100%; }
.sj-product-card__badge { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 7px; background: #fffaf3; color: #4b4643; border-radius: 999px; font-size: 12px; }
.sj-product-card__arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #2f2b29; background: rgba(255,255,255,.92); border: 0; border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,.12); opacity: 0; transform: translateY(-50%); cursor: pointer; transition: opacity .2s ease, background .2s ease; }
.sj-product-card:hover .sj-product-card__arrow, .sj-product-card:focus-within .sj-product-card__arrow { opacity: 1; }
.sj-product-card__arrow:hover { color: #000; background: #fff; transform: translateY(-50%); }
.sj-product-card__arrow:disabled { opacity: .3; cursor: default; }
.sj-product-card__arrow--prev { left: 10px; }
.sj-product-card__arrow--next { right: 10px; }
.sj-product-card__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sj-product-card__cart { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; overflow: hidden; padding: 0; color: #282523; background: #fff; border: 0; border-radius: 999px; box-shadow: 0 3px 16px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(8px); text-decoration: none; white-space: nowrap; transition: width .28s ease, color .2s ease, background .2s ease, opacity .2s ease, transform .2s ease, visibility .2s ease; }
.sj-product-card:hover .sj-product-card__cart, .sj-product-card:focus-within .sj-product-card__cart { opacity: 1; visibility: visible; transform: translateY(0); }
.sj-product-card__cart:hover, .sj-product-card__cart:focus-visible { width: min(156px, calc(100% - 24px)); color: #fff; background: var(--sj-accent); }
.sj-product-card__cart-label { max-width: 0; overflow: hidden; opacity: 0; font-size: 13px; transition: max-width .25s ease, opacity .2s ease, margin .25s ease; }
.sj-product-card__cart:hover .sj-product-card__cart-label, .sj-product-card__cart:focus-visible .sj-product-card__cart-label { max-width: 95px; margin-left: 14px; opacity: 1; }
.sj-product-card__cart-icon { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; }
.sj-product-card__cart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sj-product-card__content { padding-top: 11px; }
.sj-product-card__title { margin: 0 0 3px; font-size: 14px; font-weight: 400; line-height: 1.45; }
.sj-product-card__title a { color: #5c5652; text-decoration: none; }
.sj-product-card__title a:hover { color: #111; }
.sj-product-card__price { color: #4b4643; font-size: 13px; }
.sj-product-card__price del { margin-left: 4px; color: #9e9995; }
.sj-product-card__price ins { text-decoration: none; }
.sj-products__empty { padding: 24px; background: var(--sj-bg); text-align: center; }

/* Product shop and category archives */
.sj-archive { min-height: 65vh; padding: clamp(44px, 6vw, 88px) 0 84px; background: var(--sj-bg); }
.sj-archive__header { margin-bottom: clamp(48px, 7vw, 92px); }
.sj-archive__header h1 { margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 400; letter-spacing: -.035em; }
.sj-archive__description { max-width: 680px; margin-top: 16px; color: #746e69; font-size: 14px; }
.sj-archive-toolbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.sj-archive-filters, .sj-archive-tools { display: flex; align-items: center; gap: 22px; }
.sj-filter { position: relative; }
.sj-filter summary { color: #57514d; font-size: 13px; list-style: none; cursor: pointer; }
.sj-filter summary::-webkit-details-marker { display: none; }
.sj-filter summary::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.sj-filter[open] summary::after { transform: rotate(225deg); }
.sj-filter__panel { position: absolute; top: calc(100% + 12px); left: 0; display: grid; gap: 13px; width: 230px; padding: 18px; background: var(--sj-bg); border: 1px solid #e3ded8; border-radius: 13px; box-shadow: 0 14px 34px rgba(42,36,32,.12); }
.sj-filter__panel label { margin: 0; color: #57514d; font-size: 13px; font-weight: 400; }
.sj-filter__panel--price { grid-template-columns: 1fr 1fr; width: 270px; }
.sj-filter__panel--price button { grid-column: 1 / -1; }
.sj-filter__panel input[type="number"] { min-height: 40px; margin-top: 4px; }
.sj-filter__panel button { min-height: 40px; color: #fff; background: #000; border-color: #000; border-radius: 8px; }
.sj-archive-count { color: #817b76; font-size: 13px; white-space: nowrap; }
.sj-sort label { display: flex; align-items: center; gap: 7px; margin: 0; color: #57514d; font-size: 13px; font-weight: 400; }
.sj-sort select { width: auto; min-height: 38px; padding: 5px 30px 5px 9px; background-color: transparent; border: 0; border-radius: 7px; box-shadow: none; font-size: 13px; }
.sj-grid-switch { display: flex; gap: 4px; }
.sj-grid-switch button { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; color: #817a75; background: transparent; border: 0; border-radius: 6px; transform: none; }
.sj-grid-switch button.is-active, .sj-grid-switch button:hover { color: #282522; background: #eee9e3; transform: none; }
.sj-grid-switch svg { width: 20px; height: 20px; fill: currentColor; }
.sj-archive-grid { --sj-archive-columns: 4; display: grid; grid-template-columns: repeat(var(--sj-archive-columns), minmax(0,1fr)); gap: clamp(20px, 2.2vw, 34px); }
.sj-pagination { margin-top: 54px; }
.sj-pagination .page-numbers { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sj-pagination a, .sj-pagination span { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; color: #514c48; border-radius: 50%; text-decoration: none; }
.sj-pagination .current, .sj-pagination a:hover { color: #fff; background: #000; }
.sj-archive-empty { padding: 54px 20px; text-align: center; }

@media (max-width: 900px) {
  .sj-archive__header { margin-bottom: 48px; }
  .sj-archive-toolbar { align-items: flex-start; flex-direction: column; gap: 18px; }
  .sj-archive-tools { width: 100%; justify-content: space-between; }
  .sj-archive-grid { --sj-archive-columns: 2 !important; gap: 24px 14px; }
  .sj-grid-switch { display: none; }
}

@media (max-width: 520px) {
  .sj-archive { padding-top: 38px; }
  .sj-archive-filters { gap: 16px; }
  .sj-archive-tools { gap: 10px; }
  .sj-archive-count { display: none; }
  .sj-sort { margin-left: auto; }
  .sj-filter__panel { position: fixed; top: auto; right: 14px; bottom: 14px; left: 14px; width: auto; }
}

@media (max-width: 900px) {
  .admin-bar .site-header { top: 46px; }
  .sj-container { width: min(100% - 28px, var(--sj-container)); }
  .header-inner { min-height: 88px; grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .mobile-menu-toggle { display: inline-grid; justify-self: start; }
  .primary-nav { position: absolute; inset: 100% 0 auto; display: none; padding: 18px 20px 24px; background: var(--sj-bg); border-top: 1px solid var(--sj-border); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { align-items: stretch; flex-direction: column; gap: 0; }
  .primary-nav a { display: block; padding: 11px 0; font-size: 16px; }
  .site-logo, .site-branding img { width: 74px; height: 74px; }
  .site-header.is-compact .site-logo, .site-header.is-compact .site-branding img { width: 58px; height: 58px; }
  .header-account { display: none; }
  .header-actions { gap: 8px; }
  .site-main { padding-block: 36px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bottom { grid-column: auto; grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
  .sj-products { width: calc(100% - 28px); margin-inline: auto; }
  .sjp-related .sj-products { width: 100%; }
  .sj-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .sj-product-card__arrow { width: 32px; height: 32px; opacity: 1; }
  .sj-product-card__cart { right: 9px; bottom: 9px; }
}

@media (hover: none) {
  .sj-product-card__cart { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 480px) {
  .announcement-bar { min-height: 40px; padding-block: 8px; font-size: 13px; }
  .header-inner { min-height: 78px; }
  .site-logo, .site-branding img { width: 66px; height: 66px; }
  .site-header.is-compact .site-logo, .site-header.is-compact .site-branding img { width: 54px; height: 54px; }
  th, td { padding: 10px; }
  .newsletter-form input[type="email"] { height: 56px; padding-left: 20px; }
  .newsletter-form__submit { right: 7px; }
  .sj-product-card__badge { top: 8px; right: 8px; min-width: 38px; min-height: 38px; }
  .sj-product-card__cart:hover, .sj-product-card__cart:focus-visible { width: 44px; }
  .sj-product-card__cart-label { display: none; }
}

@media (max-width: 560px) {
  .sj-search-modal { padding: 14px; place-items: center; }
  .sj-search-dialog { max-height: calc(100vh - 28px); border-radius: 14px; }
  .sj-search-dialog__body { max-height: calc(100vh - 104px); padding: 16px; }
  .sj-search-results { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Custom single-product template. Deliberately isolated from WooCommerce classes. */
.sjp-page { padding: 24px 0 72px; background: var(--sj-bg); }
.sjp-layout { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(330px, .95fr); align-items: start; gap: clamp(34px, 4vw, 66px); }
.sjp-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.sjp-gallery.is-single { grid-template-columns: 1fr; }
.sjp-gallery.is-single .sjp-gallery__item { aspect-ratio: 1 / 1; }
.sjp-gallery__item { position: relative; display: block; width: 100%; min-height: 0; aspect-ratio: 4 / 5.25; padding: 0; overflow: hidden; color: inherit; background: #ece8e3; border: 0; border-radius: 0; cursor: zoom-in; transform: none; }
.sjp-gallery__item::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(100deg, #ece8e3 20%, #f8f5f1 40%, #ece8e3 60%); background-size: 220% 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease, visibility .32s ease; }
.sjp-gallery__item.is-loading::before { opacity: 1; visibility: visible; animation: sjp-skeleton 1.25s ease-in-out infinite; }
.sjp-gallery__item:hover { background: #ece8e3; border: 0; transform: none; }
.sjp-gallery__item img { width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 1; object-fit: cover !important; transition: transform .45s ease, opacity .35s ease; }
.sjp-gallery.is-single .sjp-gallery__item img { object-fit: contain !important; background: #fff; }
.sjp-gallery__item.is-loading img { opacity: 0; }
.sjp-gallery__item:hover img { transform: scale(1.018); }
.sjp-summary { position: sticky; top: 34px; padding-top: 24px; }
.sjp-title { margin: 0 0 13px; font-size: clamp(26px, 2.1vw, 36px); font-weight: 400; letter-spacing: -.025em; }
.sjp-price { color: #5a5551; font-size: 15px; }
.sjp-price ins { text-decoration: none; }
.sjp-price del { margin-left: 5px; color: #a19b96; }
.sjp-divider { height: 1px; margin: 30px 0; background: #e3ded8; }
.sjp-description { margin-bottom: 28px; color: #5f5955; font-size: 14px; line-height: 1.65; }
.sjp-description h2 { margin: 22px 0 8px; color: #4f4a46; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.sjp-description h2:first-child { margin-top: 0; }
.sjp-description h3 { margin: 18px 0 7px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.sjp-description p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; }
.sjp-description p:last-child { margin-bottom: 0; }
.sjp-options { margin: 0 0 27px; padding: 0; border: 0; }
.sjp-options legend { margin-bottom: 10px; color: #5b5551; font-size: 14px; }
.sjp-options__list { display: grid; grid-template-columns: repeat(var(--sjp-option-columns, 1), minmax(0, 1fr)); gap: 10px; }
.sjp-option { position: relative; isolation: isolate; width: 100%; min-height: 48px; padding: 10px 16px; overflow: hidden; color: #403c39; background: #fff; border: 1px solid #d9d4cf; border-radius: 12px; font-size: 14px; line-height: 1.35; cursor: pointer; transform: none; transition: color .3s ease, border-color .3s ease; }
.sjp-option::before { content: ''; position: absolute; z-index: 0; inset: 0; background: #000; transform: scaleX(0); transform-origin: left center; transition: transform .38s cubic-bezier(.22,.61,.36,1); }
.sjp-option span { position: relative; z-index: 1; }
.sjp-option:hover { color: #fff; background: #fff; border-color: #000; transform: none; }
.sjp-option:hover::before { transform: scaleX(1); }
.sjp-option.is-selected { color: #fff; background: #000; border-color: #000; }
.sjp-option.is-selected::before { background: #000; transform: scaleX(1); }
.sjp-purchase-row { display: grid; grid-template-columns: 116px 1fr; gap: 12px; }
.sjp-quantity { display: grid; grid-template-columns: 36px 1fr 36px; height: 50px; overflow: hidden; background: #fff; border: 1px solid #d9d4cf; border-radius: 12px; }
.sjp-quantity button { min-height: 0; padding: 0; color: #45413e; background: transparent; border: 0; border-radius: 0; font-size: 18px; transform: none; }
.sjp-quantity button:hover { color: #000; background: #f5f2ee; border: 0; transform: none; }
.sjp-quantity input { width: 100%; min-width: 0; height: 48px; min-height: 0; padding: 0; text-align: center; border: 0; border-radius: 0; box-shadow: none; appearance: textfield; }
.sjp-quantity input::-webkit-inner-spin-button { appearance: none; }
button.sjp-add-button { position: relative; isolation: isolate; display: flex; gap: 9px; width: 100%; min-height: 50px; overflow: hidden; color: #fff; background: #000; border-color: #000; border-radius: 12px; }
button.sjp-add-button::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, #000 0%, #151515 55%, #000 100%); transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,.61,.36,1); }
button.sjp-add-button svg, button.sjp-add-button span { position: relative; z-index: 1; }
button.sjp-add-button:hover, button.sjp-add-button:focus-visible { color: #fff; background: #000; border-color: #000; }
button.sjp-add-button:hover::before, button.sjp-add-button:focus-visible::before { transform: scaleX(1); }
button.sjp-add-button:disabled { color: #fff; background: #000; border-color: #000; cursor: not-allowed; opacity: 1; transform: none; }
button.sjp-add-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sjp-form-feedback { min-height: 20px; margin: 8px 2px 0; color: #b3261e; font-size: 13px; }
.sjp-express-checkout { width: 100%; margin-top: 8px; }
.sjp-express-checkout:empty { display: none; }
.sjp-express-checkout > * { max-width: 100%; }
.sjp-related { padding-top: 58px; }
.sjp-related h2 { margin-bottom: 24px; font-size: clamp(22px, 2vw, 30px); font-weight: 400; }
.sjp-related .sj-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@keyframes sjp-skeleton { 0% { background-position: 160% 0; } 100% { background-position: -70% 0; } }

@media (max-width: 900px) {
  .sjp-page { padding-top: 14px; }
  .sjp-layout { grid-template-columns: 1fr; gap: 26px; }
  .sjp-summary { position: static; padding-top: 0; }
  .sjp-related .sj-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sjp-options__list.is-columns-4, .sjp-options__list.is-columns-5, .sjp-options__list.is-columns-6,
  .sj-quick-options > div.is-columns-4, .sj-quick-options > div.is-columns-5, .sj-quick-options > div.is-columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .sjp-options__list.is-columns-3, .sjp-options__list.is-columns-4, .sjp-options__list.is-columns-5, .sjp-options__list.is-columns-6,
  .sj-quick-options > div.is-columns-3, .sj-quick-options > div.is-columns-4, .sj-quick-options > div.is-columns-5, .sj-quick-options > div.is-columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sjp-gallery { gap: 2px; }
  .sjp-gallery__item { aspect-ratio: 3 / 4; }
  .sjp-purchase-row { grid-template-columns: 104px 1fr; gap: 8px; }
  .sjp-option { min-height: 45px; }
}

/* Classic shortcode cart and checkout */
.sj-cart-page,
.sj-cart-page .site-main,
.sj-cart-page .entry-content,
.sj-cart-page .entry-content > .woocommerce { background: var(--sj-bg); }
.sj-cart-page .site-main,
.sj-checkout-page .site-main { width: min(calc(100% - 40px), var(--sj-container)); max-width: var(--sj-container); padding: 38px 0 72px; }
.sj-cart-page .entry-content,
.sj-checkout-page .entry-content { width: 100%; max-width: none; }
.sj-cart-page .entry-content > h1,
.sj-checkout-page .entry-content > h1 { margin-bottom: 28px; font-size: clamp(26px, 2.3vw, 38px); font-weight: 400; }
.sj-cart-page .entry-content,
.sj-checkout-page .entry-content { color: #403c39; }
.woocommerce-error,
.woocommerce-message,
.woocommerce-info { margin: 0 0 22px; padding: 14px 18px; background: #f6f3ef; border: 1px solid #e2ddd7; border-radius: 10px; list-style: none; }
.woocommerce-message { border-left: 3px solid #287942; }
.woocommerce-error { border-left: 3px solid #b3261e; }

/* Cart */
.sj-cart-page .entry-content::after { content: ''; display: table; clear: both; }
.sj-cart-page-form { float: left; width: calc(70% - 44px); }
.sj-cart-page-form table.shop_table { margin: 0; border: 0; }
.sj-cart-page-form thead { display: none; }
.sj-cart-page-form tbody { display: block; }
.sj-cart-page-form tr.cart_item { position: relative; display: grid; grid-template-columns: 118px minmax(180px, 1fr) 150px 110px 34px; align-items: center; gap: 18px; padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid #e1dcd6; }
.sj-cart-page-form td { display: block; padding: 0; border: 0; }
.sj-cart-page-form .product-thumbnail img { width: 118px !important; height: 150px !important; object-fit: cover; }
.sj-cart-page-form .product-name a { color: #3c3835; text-decoration: none; font-size: 15px; }
.sj-cart-page-form .variation { margin: 5px 0 0; color: #756f6a; font-size: 13px; }
.sj-cart-page-form .variation dt { display: none; }
.sj-cart-page-form .variation dd { margin: 0; }
.sj-cart-page-form .variation p { margin: 0; }
.sj-cart-page-form .product-price { display: none; }
.sj-cart-page-form .product-subtotal { text-align: right; font-size: 14px; }
.sj-cart-page-form .product-remove { grid-column: 5; grid-row: 1; }
.sj-cart-page-form .remove { display: grid; place-items: center; width: 32px; height: 32px; color: #3c3835 !important; background: transparent !important; border-radius: 50%; text-decoration: none; font-size: 0; }
.sj-cart-page-form .remove::before { content: '×'; font-size: 24px; font-weight: 300; }
.sj-cart-page-form .remove:hover { color: #fff !important; background: #000 !important; }
.sj-cart-page-form .quantity { display: grid; grid-template-columns: 38px 1fr 38px; width: 116px; height: 48px; overflow: hidden; background: #fff; border: 1px solid #d8d3cd; border-radius: 8px; }
.sj-cart-page-form .quantity input.qty { width: 40px; min-width: 0; height: 46px; min-height: 0; padding: 0; text-align: center; border: 0; border-radius: 0; box-shadow: none; appearance: textfield; }
.sj-cart-page-form .quantity input.qty::-webkit-inner-spin-button { appearance: none; }
.sj-cart-qty { min-height: 0; padding: 0; color: #3d3936; background: transparent; border: 0; border-radius: 0; font-size: 18px; transform: none; }
.sj-cart-qty:hover { color: #000; background: #f3efeb; border: 0; transform: none; }
.sj-cart-page-form tr:not(.cart_item) { display: block; }
.sj-cart-page-form td.actions { padding-top: 6px; border: 0; }
.sj-cart-page-form .coupon { display: flex; gap: 8px; }
.sj-cart-page-form .coupon input { width: 220px; }
.sj-cart-page-form button[name="update_cart"] { float: right; color: #fff; background: #000; border-color: #000; }
.sj-cart-page .cart-collaterals { float: right; width: 30%; padding: 42px 34px; background: #f3f3f3; }
.sj-cart-page .cart_totals { width: 100% !important; float: none !important; }
.sj-cart-page .cart_totals h2 { margin-bottom: 24px; font-size: 20px; font-weight: 400; }
.sj-cart-page .cart_totals table { margin: 0 0 26px; border: 0; }
.sj-cart-page .cart_totals tr { border-bottom: 1px solid #ddd; }
.sj-cart-page .cart_totals th,
.sj-cart-page .cart_totals td { padding: 14px 0; background: transparent; border: 0; font-size: 13px; }
.sj-cart-page .cart_totals td { text-align: right; }
.sj-cart-page .order-total th,
.sj-cart-page .order-total td { padding-top: 22px; font-size: 16px; }
.sj-cart-page .wc-proceed-to-checkout { padding: 0; }
.sj-cart-page .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; color: #fff !important; background: #000 !important; border: 1px solid #000 !important; border-radius: 12px; text-decoration: none; transition: filter .2s ease; }
.sj-cart-page .checkout-button:hover { color: #fff; filter: brightness(1.3); }

/* Checkout */
.sj-checkout-page,
.sj-checkout-page .site-main,
.sj-checkout-page .entry-content,
.sj-checkout-page .entry-content > .woocommerce { background: var(--sj-bg); }
.sj-checkout-page .site-header,
.sj-checkout-page .announcement-bar,
.sj-checkout-page .site-footer { display: none; }
.sj-checkout-page .site-main { width: 100%; max-width: none; padding: 0; }
.sj-checkout-page .entry-content > h1 { display: none; }
.sj-checkout-page .entry-content { width: 100%; max-width: none; }
.sj-checkout-page .entry-content > .woocommerce { width: min(100%, 1314px); margin-inline: auto; }
.sj-checkout-page .woocommerce-form-coupon-toggle { width: calc(50% - 36px); margin: 22px 0 0; }
.sj-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0; padding: 0; overflow: hidden; background: var(--sj-bg); border: 1px solid #dfdbd6; border-radius: 11px; }
.sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon { position: relative; display: flex; align-items: center; gap: 7px; width: 100%; min-height: 58px; padding: 15px 56px 15px 20px; color: #292725; text-decoration: none; line-height: 1.3; transition: background-color .2s ease; }
.sj-coupon-toggle__label { flex: 0 0 auto; font-weight: 500; }
.sj-coupon-toggle__hint { color: #68635e; font-size: 14px; }
.sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon::after { content: '+'; position: absolute; top: 50%; right: 19px; width: 22px; height: 22px; color: #333; font-size: 22px; font-weight: 300; line-height: 20px; text-align: center; transform: translateY(-50%); transition: transform .25s ease; }
.sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon:hover { color: #000; background: #f2efeb; }
.sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon:focus-visible { outline: 2px solid #111; outline-offset: -3px; border-radius: 10px; }
.sj-checkout-page form.checkout_coupon { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; float: none !important; clear: both; width: calc(50% - 36px); margin: 12px 0 24px !important; padding: 0 !important; overflow: visible; border: 0 !important; }
.sj-checkout-page form.checkout_coupon::after { content: ''; display: table; clear: both; }
.sj-checkout-page form.checkout_coupon .form-row { float: none !important; clear: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.sj-checkout-page form.checkout_coupon .input-text { width: 100%; height: 50px; padding-inline: 16px; background: #fff; border: 1px solid #cfcac5; border-radius: 10px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; }
.sj-checkout-page form.checkout_coupon .input-text:focus { border-color: #111; box-shadow: 0 0 0 1px #111; outline: 0; }
.sj-checkout-page form.checkout_coupon button { width: 100%; min-height: 50px; color: #fff; background: #000; border: 1px solid #000; border-radius: 10px; transition: transform .2s ease, opacity .2s ease; }
.sj-checkout-page form.checkout_coupon button:hover { color: #fff; background: #000; opacity: .82; transform: translateY(-1px); }
.sj-checkout-page form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 72px; float: none !important; clear: both; width: 100% !important; min-width: 0; min-height: calc(100vh - 20px); }
.sj-checkout-page #customer_details { grid-column: 1; grid-row: 1; padding: 42px 0 70px; }
.sj-checkout-page #order_review_heading { display: none; }
.sj-checkout-page #order_review { grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; min-height: 100%; margin: 0; padding: 42px 46px 70px; background: #f5f5f5; border-left: 1px solid #dedede; }
.sj-checkout-page .col2-set { display: block; }
.sj-checkout-page .col-1,
.sj-checkout-page .col-2 { float: none !important; width: 100% !important; }
.sj-checkout-page .woocommerce-billing-fields > h3,
.sj-checkout-page .woocommerce-shipping-fields h3 { margin: 0 0 18px; font-size: 22px; }
.sj-checkout-page .form-row { margin: 0 0 12px; padding: 0; }
.sj-checkout-page .form-row-first,
.sj-checkout-page .form-row-last { width: calc(50% - 6px); }
.sj-checkout-page .form-row-first { float: left; }
.sj-checkout-page .form-row-last { float: right; }
.sj-checkout-page .form-row-wide { clear: both; }
.sj-checkout-page .form-row label { margin: 0 0 5px; color: #55504c; font-size: 13px; }
.sj-checkout-page .input-text,
.sj-checkout-page select { min-height: 50px; padding: 11px 14px; background: #fff; border: 1px solid #d7d3cf; border-radius: 10px; }
.sj-checkout-page .select2-container .select2-selection--single { height: 50px; border-color: #d7d3cf; border-radius: 10px; }
.sj-checkout-page .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-left: 14px; }
.sj-checkout-page .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; }
.sjcheckout-summary { width: 100%; margin: 0 0 28px; color: #1f1f1f; }
.sjcheckout-products { display: grid; gap: 16px; margin-bottom: 24px; }
.sjcheckout-product { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; }
.sjcheckout-product__media { position: relative; width: 66px; height: 66px; }
.sjcheckout-product__media img { display: block; width: 66px !important; height: 66px !important; margin: 0; object-fit: cover; background: #fff; border: 1px solid #d6d6d6; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sjcheckout-product__quantity { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; color: #fff; background: #111; border: 2px solid #f5f5f5; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; }
.sjcheckout-product__copy { min-width: 0; }
.sjcheckout-product__name { overflow: hidden; margin-bottom: 3px; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sjcheckout-product__meta { color: #777; font-size: 12px; line-height: 1.45; }
.sjcheckout-product__meta dl,
.sjcheckout-product__meta p { margin: 0; }
.sjcheckout-product__meta dt,
.sjcheckout-product__meta dd { display: inline; margin: 0 3px 0 0; }
.sjcheckout-product__price { padding-left: 15px; font-size: 14px; white-space: nowrap; }
.sjcheckout-totals { display: grid; gap: 13px; padding-top: 18px; border-top: 1px solid #d8d8d8; }
.sjcheckout-total-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; font-size: 14px; }
.sjcheckout-total-row > strong { font-weight: 500; text-align: right; }
.sjcheckout-total-row--shipping > div { max-width: 280px; text-align: right; }
.sjcheckout-total-row--shipping ul { margin: 0; padding: 0; list-style: none; }
.sjcheckout-total-row--shipping li { margin: 0 0 5px; }
.sjcheckout-total-row--shipping label { display: inline; }
.sjcheckout-total-row--grand { align-items: baseline; margin-top: 4px; padding-top: 18px; border-top: 1px solid #d8d8d8; font-size: 19px; }
.sjcheckout-total-row--grand > strong { font-size: 22px; font-weight: 600; }
.sjcheckout-total-row--grand .includes_tax { display: block; color: #777; font-size: 11px; font-weight: 400; }
.sj-checkout-page #payment { background: transparent; }
.sj-checkout-page .payment_methods { margin: 0 0 18px; padding: 0; list-style: none; }
.sj-checkout-page .payment_methods li { margin-bottom: 8px; padding: 14px 16px; background: #fff; border: 1px solid #d7d3cf; border-radius: 10px; }
.sj-checkout-page .payment_box { margin: 12px -16px -14px; padding: 14px 16px; background: #f7f5f2; border-top: 1px solid #e1ddd7; font-size: 13px; }
.sj-checkout-page .woocommerce-privacy-policy-text { color: #595959; font-size: 13px; line-height: 1.55; }
.sj-checkout-page .payment_box p:last-child { margin-bottom: 0; }
.sj-checkout-page .place-order { padding: 0 !important; }
.sj-checkout-page #place_order { width: 100%; min-height: 52px; color: #fff !important; background: #000 !important; border-color: #000 !important; border-radius: 10px; }
.sj-checkout-page #place_order:hover { background: #000; border-color: #000; filter: brightness(1.3); }

@media (max-width: 980px) {
  .sj-cart-page-form,
  .sj-cart-page .cart-collaterals { float: none; width: 100%; }
  .sj-cart-page .cart-collaterals { margin-top: 28px; }
  .sj-checkout-page .entry-content > .woocommerce { width: min(calc(100% - 32px), 720px); }
  .sj-checkout-page .woocommerce-form-coupon-toggle { width: 100%; }
  .sj-checkout-page form.checkout_coupon { grid-template-columns: minmax(0, 1fr) 110px; width: 100%; }
  .sj-checkout-page form.checkout { grid-template-columns: 1fr; gap: 0; }
  .sj-checkout-page #customer_details,
  .sj-checkout-page #order_review { grid-column: 1; grid-row: auto; }
  .sj-checkout-page #customer_details { padding: 34px 0; }
  .sj-checkout-page #order_review { min-height: 0; margin-top: 0; padding: 30px 26px 38px; border: 0; }
}

@media (max-width: 680px) {
  .sj-cart-page .site-main,
  .sj-checkout-page .site-main { width: min(calc(100% - 28px), var(--sj-container)); }
  .sj-cart-page-form tr.cart_item { grid-template-columns: 84px minmax(0, 1fr) 30px; gap: 12px; }
  .sj-cart-page-form .product-thumbnail { grid-row: 1 / span 3; }
  .sj-cart-page-form .product-thumbnail img { width: 84px !important; height: 108px !important; }
  .sj-cart-page-form .product-name { grid-column: 2; }
  .sj-cart-page-form .product-quantity { grid-column: 2; }
  .sj-cart-page-form .product-subtotal { grid-column: 2; text-align: left; }
  .sj-cart-page-form .product-remove { grid-column: 3; grid-row: 1; }
  .sj-cart-page-form .coupon { flex-direction: column; }
  .sj-cart-page-form .coupon input { width: 100%; }
  .sj-cart-page-form button[name="update_cart"] { float: none; width: 100%; margin-top: 8px; }
  .sj-cart-page .cart-collaterals { padding: 28px 22px; }
  .sj-checkout-page .form-row-first,
  .sj-checkout-page .form-row-last { float: none; width: 100%; }
  .sj-checkout-page #order_review { padding-left: 20px; padding-right: 20px; }
  .sj-checkout-page form.checkout_coupon { grid-template-columns: 1fr; }
  .sj-checkout-page .woocommerce-form-coupon-toggle .showcoupon { align-items: flex-start; flex-direction: column; gap: 2px; padding-left: 17px; }
  .sjcheckout-product { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; }
  .sjcheckout-product__media,
  .sjcheckout-product__media img { width: 58px !important; height: 58px !important; }
}

/* Fully isolated custom cart markup */
.sjcart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 48px; }
.sjcart-items { min-width: 0; }
.sjcart-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.sjcart-heading h2 { margin: 0; font-size: 28px; font-weight: 400; }
.sjcart-heading span { display: grid; place-items: center; width: 28px; height: 28px; background: #e8e5e1; border-radius: 50%; font-size: 12px; }
.sjcart-item { display: grid; grid-template-columns: 120px minmax(180px,1fr) 118px 90px 34px; align-items: center; gap: 18px; padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid #e1dcd6; }
.sjcart-item__image img { display: block; width: 120px; height: 150px; object-fit: cover; }
.sjcart-item__details h3 { margin: 0 0 5px; font-size: 15px; font-weight: 400; }
.sjcart-item__details h3 a { color: #383431; text-decoration: none; }
.sjcart-item__meta { margin: 0 0 5px; color: #746e69; font-size: 13px; }
.sjcart-item__meta div { display: flex; gap: 4px; }
.sjcart-item__meta dt { display: none; }
.sjcart-item__meta dd { margin: 0; }
.sjcart-item__unit-price { color: #746e69; font-size: 13px; }
.sjcart-quantity { display: grid; grid-template-columns: 36px 1fr 36px; height: 46px; overflow: hidden; background: #fff; border: 1px solid #d8d3cd; border-radius: 8px; }
.sjcart-quantity button { min-height: 0; padding: 0; color: #333; background: transparent; border: 0; border-radius: 0; transform: none; }
.sjcart-quantity button:hover { color: #000; background: #f3efeb; border: 0; transform: none; }
.sjcart-quantity input { width: 100%; min-width: 0; height: 44px; min-height: 0; padding: 0; text-align: center; border: 0; border-radius: 0; box-shadow: none; appearance: textfield; }
.sjcart-item__subtotal { text-align: right; font-size: 14px; }
.sjcart-item__remove { display: grid; place-items: center; width: 32px; height: 32px; color: #3c3835; border-radius: 50%; }
.sjcart-item__remove:hover { color: #fff; background: #000; }
.sjcart-item__remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sjcart-summary { padding: 38px 32px; background: #f3f3f3; }
.sjcart-coupon { padding-bottom: 18px; border-bottom: 1px solid #ddd; }
.sjcart-coupon label { margin-bottom: 7px; font-size: 13px; font-weight: 400; }
.sjcart-coupon > div { display: grid; grid-template-columns: 1fr 42px; }
.sjcart-coupon input { height: 44px; min-height: 0; border-radius: 8px 0 0 8px; }
.sjcart-coupon button { min-height: 44px; padding: 0; color: #fff; background: #000; border: 1px solid #000; border-radius: 0 8px 8px 0; font-size: 20px; transform: none; }
.sjcart-totals { margin: 12px 0 0; }
.sjcart-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid #ddd; }
.sjcart-totals dt { font-size: 13px; }
.sjcart-totals dd { margin: 0; text-align: right; font-size: 14px; }
.sjcart-totals__total { padding-top: 20px !important; font-weight: 600; }
.sjcart-summary__note { margin: 14px 0 24px; color: #746e69; font-size: 12px; }
.sjcart-checkout, button.sjcart-update { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; color: #fff !important; background: #000 !important; border: 1px solid #000 !important; border-radius: 11px; text-decoration: none; }
button.sjcart-update { margin-top: 9px; min-height: 42px; color: #333 !important; background: transparent !important; font-size: 13px; }
.sjcart-checkout:hover { filter: brightness(1.3); }
@media (max-width: 980px) { .sjcart-layout { grid-template-columns: 1fr; } .sjcart-summary { width: 100%; } }
@media (max-width: 680px) {
  .sjcart-layout { gap: 22px; }
  .sjcart-item { grid-template-columns: 82px minmax(0,1fr) 30px; gap: 10px 12px; }
  .sjcart-item__image { grid-row: 1 / span 3; }
  .sjcart-item__image img { width: 82px; height: 108px; }
  .sjcart-item__details { grid-column: 2; }
  .sjcart-quantity { grid-column: 2; width: 110px; }
  .sjcart-item__subtotal { grid-column: 2; text-align: left; }
  .sjcart-item__remove { grid-column: 3; grid-row: 1; }
  .sjcart-summary { padding: 28px 20px; }
}

@media (max-width: 760px) {
  .sj-quick-modal { padding: 10px; }
  .sj-quick-dialog, .sj-quick-content { max-height: calc(100vh - 20px); }
  .sj-quick-layout { grid-template-columns: 1fr; min-height: 0; }
  .sj-quick-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sj-quick-image { flex: 0 0 86%; scroll-snap-align: start; }
  .sj-quick-gallery.is-single .sj-quick-image { flex-basis: 100%; }
  .sj-quick-summary { position: static; padding: 30px 20px 26px; }
  .sj-quick-summary h2 { font-size: 23px; }
  .sj-quick-skeleton { grid-template-columns: 1fr; }
  .sj-quick-skeleton i { min-height: 360px; }
  .sj-quick-skeleton span { padding: 30px 20px; }
}

/* Isolated customer account */
.sjaccount-page { min-height: 64vh; padding-block: 64px 84px; }
.sjaccount-root { width: 100%; }
.sjaccount-layout { display: grid; grid-template-columns: 285px minmax(0,1fr); align-items: start; gap: 64px; }
.sjaccount-sidebar { position: sticky; top: 98px; overflow: hidden; background: var(--sj-bg); border: 1px solid #e3ded8; border-radius: 16px; }
.sjaccount-profile { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 13px; padding: 24px 20px; border-bottom: 1px solid #e3ded8; }
.sjaccount-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.sjaccount-profile div { min-width: 0; }
.sjaccount-profile strong, .sjaccount-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjaccount-profile strong { font-size: 14px; font-weight: 500; }
.sjaccount-profile small { color: #7b746f; font-size: 11px; }
.sjaccount-nav { display: grid; gap: 6px; padding: 9px; }
.sjaccount-nav__item { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px 12px; color: #5a544f; border-radius: 9px; font-size: 13px; text-decoration: none; transition: color .2s, background .2s; }
.sjaccount-nav__item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.sjaccount-nav__item:hover, .sjaccount-nav__item.is-active { color: #fff; background: #000; }
.sjaccount-nav__item:hover svg, .sjaccount-nav__item.is-active svg { color: #fff; stroke: #fff; opacity: 1; }
.sjaccount-content { min-width: 0; }
.sjaccount-heading { margin-bottom: 35px; }
.sjaccount-heading p { margin: 0 0 7px; color: #857d77; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.sjaccount-heading h1 { margin: 0 0 8px; font-size: clamp(30px,4vw,48px); font-weight: 400; letter-spacing: -.035em; }
.sjaccount-heading span { color: #716b67; font-size: 14px; }
.sjaccount-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.sjaccount-cards > a { display: grid; align-content: start; min-height: 205px; padding: 26px; color: #393532; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 14px; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.sjaccount-cards > a:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(45,39,34,.09); }
.sjaccount-cards svg { width: 29px; height: 29px; margin-bottom: 35px; fill: none; stroke: currentColor; stroke-width: 1.45; }
.sjaccount-cards strong { margin-bottom: 5px; font-size: 16px; font-weight: 500; }
.sjaccount-cards span { color: #77706b; font-size: 12px; line-height: 1.5; }
.sjaccount-auth { display: grid; grid-template-columns: minmax(0,520px); justify-content: center; gap: 70px; width: 100%; }
.sjaccount-auth.has-register { grid-template-columns: repeat(2,minmax(0,520px)); }
.sjaccount-auth > section { padding: 40px; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 16px; }
.sjaccount-auth h1 { margin: 0 0 8px; font-size: 34px; font-weight: 400; }
.sjaccount-auth section > p { margin-bottom: 28px; color: #746e69; font-size: 13px; }
.sjaccount-form { display: grid; gap: 17px; }
.sjaccount-form label, .sjaccount-field { margin: 0; color: #514c48; font-size: 13px; font-weight: 400; }
.sjaccount-form label > input, .sjaccount-form label > select, .sjaccount-field > input, .sjaccount-field > select { height: 51px; margin-top: 6px; border-radius: 10px; }
.sjaccount-form label small { display: block; margin-top: 5px; color: #847d78; font-size: 11px; }
.sjaccount-form button[type="submit"] { min-height: 51px; color: #fff; background: #000; border-color: #000; border-radius: 10px; transform: none; }
.sjaccount-check { display: flex; align-items: center; gap: 8px; }
.sjaccount-check input { width: 17px; height: 17px; margin: 0; }
.sjaccount-lost { color: #665f5a; font-size: 12px; text-align: center; }
.sjaccount-form--wide { max-width: 760px; }
.sjaccount-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.sjaccount-field--country, .sjaccount-field--state, .sjaccount-field[id*="address_1"], .sjaccount-field[id*="address_2"] { grid-column: 1 / -1; }
.sjaccount-field em { color: #a44; font-style: normal; }
.sjaccount-password { display: grid; gap: 16px; margin: 14px 0 5px; padding: 24px; border: 1px solid #ddd7d1; border-radius: 12px; }
.sjaccount-password legend { padding: 0 8px; font-size: 14px; }
.sjaccount-orders { display: grid; gap: 10px; }
.sjaccount-order { display: grid; grid-template-columns: .65fr 1.2fr 1fr 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 12px; }
.sjaccount-order div { display: grid; gap: 2px; min-width: 0; }
.sjaccount-order small { color: #817a75; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.sjaccount-order span, .sjaccount-order strong { overflow: hidden; font-size: 13px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.sjaccount-order > a, .sjaccount-empty a, .sjaccount-addresses article a { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 7px 15px; color: #fff; background: #000; border-radius: 8px; font-size: 12px; text-decoration: none; }
.sjaccount-empty { padding: 48px; background: var(--sj-bg); border-radius: 14px; text-align: center; }
.sjaccount-addresses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.sjaccount-addresses article { min-height: 220px; padding: 27px; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 14px; }
.sjaccount-addresses article > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 30px; }
.sjaccount-addresses h2 { margin: 0; font-size: 19px; font-weight: 400; }
.sjaccount-addresses address { color: #6d6762; font-size: 13px; font-style: normal; line-height: 1.75; }
.sjaccount-order-detail { padding: 28px; background: var(--sj-bg); border: 1px solid #e2ddd7; border-radius: 14px; }
.sjaccount-order-product { display: grid; grid-template-columns: 72px minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid #ded9d3; font-size: 13px; }
.sjaccount-order-product img { width: 72px; height: 88px; object-fit: cover; border-radius: 7px; }
.sjaccount-order-totals { width: min(100%,420px); margin: 25px 0 0 auto; }
.sjaccount-order-totals div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #ded9d3; }
.sjaccount-order-totals dd { margin: 0; }

@media (max-width: 920px) {
  .sjaccount-layout { grid-template-columns: 1fr; gap: 38px; }
  .sjaccount-sidebar { position: static; }
  .sjaccount-profile { display: none; }
  .sjaccount-nav { display: flex; gap: 7px; overflow-x: auto; padding: 9px; scrollbar-width: thin; }
  .sjaccount-nav__item { flex: 0 0 auto; }
  .sjaccount-nav__item svg { display: none; }
  .sjaccount-cards { grid-template-columns: 1fr; }
  .sjaccount-cards > a { min-height: 160px; }
  .sjaccount-cards svg { margin-bottom: 20px; }
  .sjaccount-auth.has-register { grid-template-columns: 1fr; }
}

/* Custom 404 */
.sj404 { min-height: 70vh; padding: clamp(70px,9vw,135px) 0 90px; background: var(--sj-bg); }
.sj404-hero { display: grid; justify-items: center; text-align: center; }
.sj404-code { margin: 0 0 8px; color: #d8d0c8; font-size: clamp(88px,16vw,210px); font-weight: 700; line-height: .8; letter-spacing: -.08em; }
.sj404 h1 { margin: 25px 0 12px; font-size: clamp(34px,5vw,64px); font-weight: 400; letter-spacing: -.04em; }
.sj404-copy { width: min(100%,610px); margin-bottom: 30px; color: #6f6863; font-size: 15px; }
.sj404-search { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; width: min(100%,650px); min-height: 58px; padding: 5px 5px 5px 19px; background: rgba(255,255,255,.75); border: 1px solid #d9d3cd; border-radius: 999px; }
.sj404-search svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sj404-search input[type="search"] { height: 46px; min-height: 0; padding: 0 12px; background: transparent; border: 0; box-shadow: none; }
.sj404-search button { min-height: 47px; padding-inline: 27px; color: #fff; background: #000; border-color: #000; border-radius: 999px; transform: none; }
.sj404-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.sj404-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 22px; border: 1px solid #24211f; border-radius: 10px; font-size: 13px; text-decoration: none; }
.sj404-actions a.is-primary { color: #fff; background: #000; }
.sj404-products { margin-top: 90px; }
.sj404-products h2 { margin-bottom: 25px; font-size: 25px; font-weight: 400; }
.sj404-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 18px; }

/* Contact and policy pages */
.sjcontact, .sjpolicy { min-height: 68vh; padding: clamp(55px,7vw,95px) 0 90px; background: var(--sj-bg); }
.sjcontact-inner { width: min(100% - 40px, 820px); }
.sjcontact header, .sjpolicy header { margin-bottom: 34px; text-align: center; }
.sjcontact header > p, .sjpolicy header > p { margin: 0 0 5px; color: #837b75; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.sjcontact h1, .sjpolicy h1 { margin: 0 0 9px; font-size: clamp(38px,5vw,58px); font-weight: 400; letter-spacing: -.035em; }
.sjcontact header > span, .sjpolicy header > span { display: inline-block; max-width: 620px; color: #716a65; font-size: 13px; }
.sjcontact-form { display: grid; gap: 14px; }
.sjcontact-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.sjcontact-form label { margin: 0; font-size: 0; font-weight: 400; }
.sjcontact-form label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.sjcontact-form input, .sjcontact-form textarea { min-height: 58px; padding: 17px 20px; background: rgba(255,255,255,.8); border-radius: 7px; font-size: 14px; }
.sjcontact-form textarea { min-height: 255px; }
.sjcontact-form input::placeholder, .sjcontact-form textarea::placeholder { color: #746e69; }
.sjcontact-trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.sjcontact-form button { position: relative; justify-self: start; min-width: 105px; min-height: 52px; overflow: hidden; color: #fff; background: #000; border-color: #000; border-radius: 11px; transform: none; }
.sjcontact-form button i { display: none; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: sj-spin .7s linear infinite; }
.sjcontact-form.is-loading button span { display: none; }
.sjcontact-form.is-loading button i { display: block; }
.sjcontact-feedback { min-height: 22px; margin: 0; font-size: 13px; }
.sjcontact-feedback.is-success { color: #26713e; }
.sjcontact-feedback.is-error { color: #a52e2e; }
.sjpolicy-inner { width: min(100% - 40px, 900px); }
.sjpolicy-content { padding: clamp(25px,5vw,56px); background: rgba(255,255,255,.62); border: 1px solid #e2ddd7; border-radius: 15px; color: #57514d; }
.sjpolicy-content h2 { margin-top: 1.8em; font-size: 23px; font-weight: 500; }
.sjpolicy-content h2:first-child { margin-top: 0; }
.sjpolicy-content p, .sjpolicy-content li { font-size: 14px; line-height: 1.8; }
@media (max-width: 640px) {
  .sjaccount-page { width: min(100% - 28px,var(--sj-container)); padding-block: 38px 60px; }
  .sjaccount-auth > section { padding: 26px 20px; }
  .sjaccount-fields, .sjaccount-addresses { grid-template-columns: 1fr; }
  .sjaccount-order { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sjaccount-order > a { grid-column: 1 / -1; }
  .sjaccount-order-product { grid-template-columns: 58px minmax(0,1fr) auto; }
  .sjaccount-order-product > strong { grid-column: 2 / -1; text-align: right; }
  .sj404 { padding-top: 65px; }
  .sj404-search { grid-template-columns: 21px minmax(0,1fr) 45px; padding-left: 14px; }
  .sj404-search button { width: 45px; min-height: 45px; overflow: hidden; padding: 0; color: transparent; }
  .sj404-search button::after { color: #fff; content: '→'; font-size: 20px; }
  .sj404-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .sj404-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
  .sj404-products { margin-top: 62px; }
  .sjcontact-inner, .sjpolicy-inner { width: min(100% - 28px,900px); }
  .sjcontact-fields { grid-template-columns: 1fr; }
  .sjcontact-form textarea { min-height: 210px; }
  .sjcontact-form button { width: 100%; }
  .sj-policy-popover { right: 0; left: auto; width: min(220px,calc(100vw - 28px)); }
}

@media (max-width: 420px) {
  .announcement-bar { min-height: 38px; padding-block: 8px; font-size: 12px; }
  .header-inner { min-height: 76px; }
  .site-logo, .site-branding img { width: 64px; height: 64px; }
  .currency__toggle { font-size: 11px; }
  .header-action { min-width: 23px; }
  .sj-search-modal, .sj-auth-modal { padding: 10px; }
  .sj-search-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sj-cart-panel { width: 100%; }
  .sj-cart-panel__content { padding-inline: 18px; }
  .newsletter-form input[type="email"] { padding-left: 18px; }
  .sjaccount-heading h1 { font-size: 31px; }
  .sjaccount-nav__item { min-height: 44px; padding-inline: 14px; }
}

