/*
Theme Name: okiboo
Theme URI: https://okiboo.com
Author: okiboo
Description: Porcelain tableware for little hands and big moments. Standalone WooCommerce theme for okiboo.com.
Version: 2.7.19
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: okiboo
Tags: e-commerce, custom-menu, featured-images
*/

/* ═══════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════ */
:root{--serif:"Newsreader","Iowan Old Style",Georgia,serif;
  color-scheme:light;
  --white:#ffffff;
  --cream:#faf6f1;
  --sand:#efe0d5;
  --soft:#f6ede5;
  --blush:#e0ae98;
  --clay:#a76f62;
  --olive:#556b2f;
  --olive-d:#44571f;
  --walnut:#2f2621;
  --ink:#2a2521;
  --muted:#6b625b;   /* v2.6.1: darker, passes WCAG AA on white, cream and sand */
  --clay-ink:#8a5648; /* clay for small text: AA on white, cream and sand */
  --hair:rgba(42,37,33,.13);
  --hairs:rgba(42,37,33,.07);
  --gut:clamp(18px,5vw,64px);
  --maxw:1320px;
  --readw:1040px;
  --prosew:720px;   /* prose: 65-75 characters a line */
  /* ── TEXT SIZE ─────────────────────────────────────────────
     Every size on the site comes from these five numbers. The shop owner
     sets them in Appearance → Customize → okiboo → Typography; the theme
     prints the chosen values over these defaults.                      */
  --fs-body-d:19px;   /* body text on a computer   */
  --fs-body-m:17px;   /* body text on a phone      */
  --ui-scale:1;       /* labels, menus, buttons    */
  --h-scale:1;        /* headlines                 */
  --fs-base:var(--fs-body-m);
  /* reading text that sits a step below the body (captions, card text) */
  --rd-sm:calc(var(--fs-base) * .88);
  --rd-md:calc(var(--fs-base) * .92);
  --rd-lg:calc(var(--fs-base) * 1.14);
  /* interface text — nav, labels, buttons. Never below 13px. */
  --ui-2xs:calc(13px   * var(--ui-scale));
  --ui-xs:calc(13.5px  * var(--ui-scale));
  --ui-sm:calc(14.5px  * var(--ui-scale));
  --ui-md:calc(16.5px  * var(--ui-scale));
  --ui-lg:calc(18px    * var(--ui-scale));
}

/* ═══════════════════════════════════════════
   2. RESET + BASE
   ═══════════════════════════════════════════ */
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:"Nunito","Segoe UI",system-ui,sans-serif;
  font-size:var(--fs-base);
  line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit}
:focus-visible{outline:1.5px solid var(--olive);outline-offset:4px}
::selection{background:var(--sand)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* Desktop reads from further away than a phone, so the text grows with the
   viewport instead of staying at the phone size. */
@media(min-width:761px){ :root{--fs-base:calc((var(--fs-body-m) + var(--fs-body-d)) / 2)} }
@media(min-width:1024px){ :root{--fs-base:var(--fs-body-d)} }

.oki-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.oki-read{max-width:var(--readw);margin-inline:auto;padding-inline:var(--gut)}
.oki-prose{max-width:var(--prosew);margin-inline:auto;padding-inline:var(--gut)}

/* ═══════════════════════════════════════════
   3. TYPE
   ═══════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;font-family:"Poppins",sans-serif;font-weight:400;
  letter-spacing:-0.01em;line-height:1.2;text-transform:none;color:var(--ink);
}
.oki-display{
  font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(36px,5.6vw,72px) * var(--h-scale));line-height:1.03;letter-spacing:-0.03em;
  margin:0;text-wrap:balance;
}
.oki-display em{font-style:normal;color:var(--clay)}

/* Editorial serif headlines (Customizer → okiboo → Typography) */
.oki-h-serif .oki-display,
.oki-h-serif .oki-mat .big,
.oki-h-serif .oki-feature .name,
.oki-h-serif .oki-article h1,
.oki-h-serif .woocommerce div.product .product_title{
  font-family:var(--serif);
  font-weight:300;letter-spacing:-0.02em;
}
.oki-h-serif .oki-display{font-size:calc(clamp(38px,5.8vw,76px) * var(--h-scale));line-height:1.02}
.oki-h-serif .oki-mat .big{font-weight:300;letter-spacing:-0.018em}
.oki-h-serif .oki-feature .name{font-weight:300}
.oki-sect-title{
  font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(27px,3.3vw,44px) * var(--h-scale));
  line-height:1.12;letter-spacing:-0.022em;margin:0;text-wrap:balance;
}
.oki-h-serif .oki-sect-title{font-family:var(--serif);font-weight:300}
.oki-eyebrow{
  font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay-ink);margin:0;
}
.oki-lede{color:var(--muted);max-width:56ch;margin:0;font-size:1.08em;line-height:1.7}
.oki-sect{padding-block:clamp(64px,9vw,124px)}
.oki-sect-head{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;margin-bottom:clamp(34px,4.5vw,56px)}
.oki-sect-head .oki-lede{text-align:center}

/* ═══════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════ */
.oki-btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  display:inline-block;background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:0;
  font-family:"Poppins",sans-serif;font-weight:400;font-size:var(--ui-sm);
  letter-spacing:.1em;text-transform:uppercase;
  padding:18px 36px;cursor:pointer;line-height:1;
  transition:background .25s,color .25s,border-color .25s;
}
.oki-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover{
  background:var(--ink);color:#fff;border-color:var(--ink)
}
.oki-btn.solid,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
  background:var(--olive);border-color:var(--olive);color:#fff
}
.oki-btn.solid:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,.woocommerce #place_order:hover{
  background:var(--olive-d);border-color:var(--olive-d);color:#fff
}
.oki-tlink{
  font-family:"Poppins",sans-serif;font-size:var(--ui-sm);letter-spacing:.1em;
  text-transform:uppercase;border-bottom:1px solid var(--hair);padding-bottom:5px;
  transition:border-color .25s
}
.oki-tlink:hover{border-color:var(--ink)}

/* ═══════════════════════════════════════════
   5. HEADER
   ═══════════════════════════════════════════ */
.oki-bar{background:var(--sand);text-align:center;
  padding:13px var(--gut);font-family:"Poppins",sans-serif;
  font-size:var(--ui-xs);letter-spacing:.1em;text-transform:uppercase;color:#5c5049}
.oki-head{position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--hairs)}
.oki-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:88px;gap:20px}
.oki-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.2vw,32px)}
.oki-nav a.n,.oki-nav .oki-cart{
  font-family:"Poppins",sans-serif;font-size:var(--ui-sm);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.oki-nav a.n:hover,.oki-nav .oki-cart:hover{color:var(--clay)}
.oki-nav a.n.on{color:var(--clay)}
.oki-brand{justify-self:center}
.oki-brand img{height:40px;width:auto}
.oki-brand .txt{font-family:"Poppins",sans-serif;font-weight:500;font-size:27px;
  letter-spacing:-0.02em;color:var(--clay)}
.oki-navright{justify-self:end;display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.oki-burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.oki-burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:4px 0}
@media(max-width:860px){
  .oki-nav{grid-template-columns:auto 1fr auto;height:70px}
  .oki-nav ul.desk{display:none}
  .oki-burger{display:block}
  .oki-brand{justify-self:center}
  .oki-navright a.n{display:none}
}
.oki-mobmenu{display:none;border-top:1px solid var(--hairs);background:var(--white)}
.oki-mobmenu.open{display:block}
.oki-mobmenu ul{list-style:none;margin:0;padding:0}
.oki-mobmenu a{display:block;padding:18px var(--gut);border-bottom:1px solid var(--hairs);
  font-family:"Poppins",sans-serif;font-size:var(--ui-md);letter-spacing:.06em;text-transform:none}
/* wp_nav_menu output in the desktop bar */
.oki-nav ul.desk li{list-style:none}
.oki-nav ul.desk a{font-family:"Poppins",sans-serif;font-size:var(--ui-sm);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.oki-nav ul.desk a:hover,
.oki-nav ul.desk .current-menu-item>a{color:var(--clay)}
/* pagination */
.oki-page .navigation.pagination{display:flex;justify-content:center}
.oki-page .nav-links .page-numbers{padding:8px 13px;border:1px solid var(--hair)}
.oki-page .nav-links .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
/* page body copy */
.oki-article-body h2{font-family:"Poppins",sans-serif;font-size:var(--rd-lg);margin:36px 0 12px;font-weight:500}
.oki-article-body ul,.oki-article-body ol{color:var(--muted);padding-left:20px}
.oki-article-body a{color:var(--clay-ink);border-bottom:1px solid var(--hair)}
.oki-article-body img{border-radius:3px;margin-block:22px}
/* WordPress admin bar */
body.admin-bar .oki-head{top:32px}
@media(max-width:782px){body.admin-bar .oki-head{top:46px}}

/* ═══════════════════════════════════════════
   6. HERO
   ═══════════════════════════════════════════ */
.oki-hero{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;background:var(--sand);
  min-height:clamp(520px,86vh,900px)}
.oki-hero--medium{min-height:clamp(440px,68vh,720px)}
.oki-hero--short {min-height:clamp(380px,54vh,580px)}
.oki-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.oki-hero-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--hero-focus,50%) center;z-index:auto}
.oki-hero.f-left   {--hero-focus:22%}
.oki-hero.f-center {--hero-focus:50%}
.oki-hero.f-right  {--hero-focus:78%}
/* A photo alone rarely holds text. The scrim is what keeps the
   headline readable whatever the shop owner uploads. */
.oki-hero-scrim{position:absolute;inset:0;z-index:-1}
/* Two layers: one lifts the bottom where the copy sits, one shades the
   side the copy is aligned to. Together they hold a headline over any
   photo the shop owner uploads, including a pale one. */
.oki-hero-scrim::before,.oki-hero-scrim::after{content:"";position:absolute;inset:0}
.oki-hero.t-light .oki-hero-scrim::before{
  background:linear-gradient(to top,rgba(26,20,16,.82) 0%,rgba(26,20,16,.62) 26%,
    rgba(26,20,16,.34) 52%,rgba(26,20,16,.10) 78%,transparent 100%)}
.oki-hero.t-light.a-left .oki-hero-scrim::after{
  background:linear-gradient(to right,rgba(26,20,16,.46) 0%,rgba(26,20,16,.18) 42%,transparent 72%)}
.oki-hero.t-light.a-center .oki-hero-scrim::after{background:rgba(26,20,16,.12)}
.oki-hero.t-dark .oki-hero-scrim::before{
  background:linear-gradient(to top,rgba(255,253,250,.92) 0%,rgba(255,253,250,.74) 26%,
    rgba(255,253,250,.44) 52%,rgba(255,253,250,.14) 78%,transparent 100%)}
.oki-hero.t-dark.a-left .oki-hero-scrim::after{
  background:linear-gradient(to right,rgba(255,253,250,.58) 0%,rgba(255,253,250,.22) 44%,transparent 74%)}
.oki-hero.t-dark.a-center .oki-hero-scrim::after{background:rgba(255,253,250,.16)}
.oki-hero-in{width:100%;padding-block:clamp(44px,7vw,86px)}
.oki-hero .copy{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,2vw,24px);max-width:min(640px,92%)}
.oki-hero.a-center .oki-hero-in{display:flex;justify-content:center}
.oki-hero.a-center .copy{align-items:center;text-align:center}
.oki-hero.a-center .oki-lede{text-align:center}

.oki-hero.t-light .oki-display,
.oki-hero.t-light .oki-lede{color:#fff;text-shadow:0 1px 26px rgba(20,14,10,.42)}
.oki-hero.t-light .oki-eyebrow{text-shadow:0 1px 18px rgba(20,14,10,.55)}
.oki-hero.t-light .oki-display em{color:var(--blush)}
.oki-hero.t-light .oki-eyebrow{color:var(--sand)}
.oki-hero.t-light .oki-btn{border-color:#fff;color:#fff}
.oki-hero.t-light .oki-btn:hover{background:#fff;color:var(--ink)}
.oki-hero.t-light .oki-btn.solid{background:#fff;border-color:#fff;color:var(--ink)}
.oki-hero.t-light .oki-btn.solid:hover{background:var(--cream);border-color:var(--cream)}
.oki-hero.t-light .oki-tlink{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

.oki-hero .oki-display{font-size:calc(clamp(40px,6.4vw,86px) * var(--h-scale))}
.oki-h-serif .oki-hero .oki-display{font-size:calc(clamp(42px,6.8vw,92px) * var(--h-scale))}
.oki-hero .oki-lede{max-width:46ch;font-size:calc(var(--ui-lg) * 1.04)}
.oki-hero .cta{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap;margin-top:6px}

/* the three facts move out of the hero into their own quiet strip */
.oki-herofacts{background:var(--cream);border-bottom:1px solid var(--hair)}
.oki-herofacts ul{list-style:none;margin:0;padding-block:clamp(18px,2.2vw,26px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.6vw,40px)}
.oki-herofacts li{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:var(--ui-sm);color:#564e48;line-height:1.4;text-align:left}
.oki-herofacts .oki-ic{color:var(--clay);flex:none}

@media(max-width:900px){
  /* a wide hero cropped to a tall phone frame loses its subject unless the
     focal point moves away from the text */
  .oki-hero{min-height:clamp(480px,74vh,680px)}
  .oki-hero.a-left  .oki-hero-img{object-position:calc(var(--hero-focus,50%) + 18%) center}
  /* on a phone the copy sits directly over the subject, so the wash has to
     be much stronger than on desktop */
  .oki-hero.t-dark .oki-hero-scrim::before{
    background:linear-gradient(to top,rgba(255,253,250,.97) 0%,rgba(255,253,250,.93) 34%,
      rgba(255,253,250,.72) 58%,rgba(255,253,250,.30) 82%,transparent 100%)}
  .oki-hero.t-dark .oki-hero-scrim::after{background:rgba(255,253,250,.20)}
  .oki-hero.t-light .oki-hero-scrim::before{
    background:linear-gradient(to top,rgba(26,20,16,.93) 0%,rgba(26,20,16,.86) 34%,
      rgba(26,20,16,.62) 58%,rgba(26,20,16,.26) 82%,transparent 100%)}
  .oki-hero.t-light .oki-hero-scrim::after{background:rgba(26,20,16,.18)}
  .oki-hero .copy{max-width:none}
  .oki-hero .cta{width:100%}
  .oki-hero .cta .oki-btn.solid{flex:1 1 auto;text-align:center}
  .oki-herofacts ul{grid-template-columns:1fr;gap:12px}
  .oki-herofacts li{justify-content:flex-start}
}

/* ═══════════════════════════════════════════
   7. FACTS STRIP
   ═══════════════════════════════════════════ */
.oki-facts{border-block:1px solid var(--hairs);background:var(--white)}
.oki-facts .row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.oki-facts div{padding:22px 14px;border-inline-start:1px solid var(--hairs)}
.oki-facts div:first-child{border-inline-start:0}
.oki-facts .oki-ic{margin:0 auto 10px;color:var(--clay);display:block}
.oki-facts b{display:block;font-family:"Poppins",sans-serif;font-weight:500;
  font-size:var(--ui-sm);margin-bottom:2px;letter-spacing:.13em;text-transform:uppercase}
.oki-facts small{color:var(--muted);font-size:var(--rd-sm)}
@media(max-width:760px){
  .oki-facts .row{grid-template-columns:repeat(2,1fr)}
  .oki-facts div:nth-child(3){border-inline-start:0}
  .oki-facts div:nth-child(n+3){border-top:1px solid var(--hairs)}
}

/* ═══════════════════════════════════════════
   8. FEATURE (product block)
   ═══════════════════════════════════════════ */
.oki-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.oki-feature .shotwrap{background:var(--cream);border-radius:3px;overflow:hidden}
.oki-feature .shotwrap img{width:100%;aspect-ratio:4/5;object-fit:cover}
.oki-feature .txt{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.oki-feature .name{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(28px,3.6vw,44px) * var(--h-scale));letter-spacing:-0.025em;margin:0}
@media(max-width:900px){.oki-feature{grid-template-columns:1fr}}

.oki-rate{display:flex;align-items:center;gap:9px;font-size:var(--rd-sm);color:var(--muted)}
.oki-rate svg{width:78px;height:14px}
.oki-rate .n{color:var(--ink)}
.oki-rate a{border-bottom:1px solid var(--hair)}

.oki-swgroup{display:grid;gap:11px}
.oki-swline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oki-swline .lab{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);min-width:104px}
.oki-sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);
  cursor:pointer;padding:0;transition:box-shadow .2s}
.oki-sw[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--white),0 0 0 3px var(--ink)}
.oki-swname{font-size:var(--rd-sm);color:var(--muted);margin:0}
.oki-buy{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.oki-buy .amt{font-family:"Poppins",sans-serif;font-size:var(--rd-lg);font-weight:400}

/* ── the collection: shape cards ──────────────── */
.oki-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.oki-shape{background:var(--white);padding:26px 22px 24px;display:flex;
  flex-direction:column;gap:7px;min-height:190px}
.oki-shape .num{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.18em;
  color:var(--clay-ink)}
.oki-shape h3{font-family:"Poppins",sans-serif;font-weight:400;font-size:var(--fs-base);
  margin:4px 0 0;letter-spacing:-0.015em}
.oki-h-serif .oki-shape h3{font-family:var(--serif);font-weight:300;font-size:var(--rd-lg)}
.oki-shape .sub{color:var(--muted);font-size:var(--rd-sm);line-height:1.5;margin:0}
.oki-shape .st{margin:auto 0 0;padding-top:14px;font-size:var(--ui-xs)}
.oki-shape .now{display:block;font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--olive-d)}
.oki-shape .soon{display:block;font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.oki-shape .st small{display:block;color:var(--muted);font-size:var(--ui-xs);margin-top:5px}
@media(max-width:900px){.oki-shapes{grid-template-columns:1fr 1fr}
  .oki-shape{min-height:0;padding:22px 18px}}
@media(max-width:480px){.oki-shapes{grid-template-columns:1fr}}

/* ── the house standard ──────────────────────── */
.oki-std{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.oki-std .hd{display:flex;flex-direction:column;gap:12px;position:sticky;top:110px}
.oki-rules{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--hair);border-block:1px solid var(--hair)}
.oki-rules li{background:var(--white);padding:22px 4px 22px 0;
  display:grid;grid-template-columns:58px 1fr;align-items:start}
.oki-rules .n{grid-row:1 / span 2;font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.16em;color:var(--clay-ink);padding-top:4px}
.oki-rules h3,.oki-rules h4,.oki-rules p{grid-column:2}
.oki-rules h3,.oki-rules h4{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--rd-md);
  margin:0 0 6px;letter-spacing:-0.005em}
.oki-rules p{color:var(--muted);font-size:var(--rd-sm);margin:0;max-width:52ch}
@media(max-width:900px){
  .oki-std{grid-template-columns:1fr;gap:26px}
  .oki-std .hd{position:static}
  .oki-rules li{grid-template-columns:44px 1fr;padding:18px 0}
}

/* ═══════════════════════════════════════════
   9. MATERIAL BAND (dark)
   ═══════════════════════════════════════════ */
.oki-mat{background:var(--walnut);color:#efe6dd}
.oki-mat .in{padding-block:clamp(60px,8vw,110px)}
.oki-mat .oki-eyebrow{color:var(--blush)}
.oki-mat .hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin-top:14px}
.oki-mat .big{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(25px,3.4vw,44px) * var(--h-scale));line-height:1.14;letter-spacing:-0.025em;
  margin:0;color:#fff;text-wrap:balance}
.oki-mat .sub{color:#b9aba0;max-width:48ch;margin:0}
.oki-mat .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.12);margin-top:clamp(36px,4.6vw,60px);
  border:1px solid rgba(255,255,255,.12)}
.oki-mat .col{background:var(--walnut);padding:24px 20px 26px}
.oki-mat .col.us{background:#3b302a}
.oki-mat .col h4{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-2xs);
  letter-spacing:.17em;text-transform:uppercase;color:#b3a69c;margin:0}
.oki-mat .col.us h4{color:var(--blush)}
.oki-mat .col ul{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:10px}
.oki-mat .col li{font-size:var(--rd-sm);line-height:1.55;color:#c3b6ab;padding-left:17px;position:relative}
.oki-mat .col.us li{color:#eee4da}
.oki-mat .col li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:#6f635b}
.oki-mat .col.us li::before{background:var(--blush);width:9px}
.oki-mat .honest{margin:clamp(28px,3.4vw,44px) 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);color:#b9aba0;font-size:var(--rd-sm);max-width:62ch}
.oki-mat .honest b{color:#fff;font-weight:400}
.oki-mat .cols.c3{grid-template-columns:repeat(3,1fr)}
.oki-mat .col h3{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-2xs);
  letter-spacing:.17em;text-transform:uppercase;color:#b3a69c;margin:0}
.oki-mat .col.us h3{color:var(--blush)}
.oki-mat .col .lede{margin:12px 0 0;font-size:var(--rd-sm);line-height:1.55;color:#efe6dd}
.oki-mat .col.us .lede{color:#fff}
.oki-mat .col a.more{display:inline-block;margin-top:18px;font-size:var(--ui-xs);color:var(--blush);
  border-bottom:1px solid rgba(224,174,152,.4);padding-bottom:2px;text-decoration:none}
.oki-mat .col a.more:hover{border-bottom-color:var(--blush)}
.oki-mat .cols + .oki-cmpwrap{margin-top:clamp(24px,3vw,36px)}
@media(max-width:860px){.oki-mat .hd{grid-template-columns:1fr;align-items:start;gap:16px}
  .oki-mat .cols{grid-template-columns:1fr 1fr}
  .oki-mat .cols.c3{grid-template-columns:1fr}}
@media(max-width:480px){.oki-mat .cols{grid-template-columns:1fr}}

/* ── comparison matrix ───────────────────────── */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.oki-cmpwrap{margin-top:clamp(32px,4.4vw,56px);overflow-x:auto;position:relative;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  -webkit-overflow-scrolling:touch}
.oki-cmp{border-collapse:collapse;width:100%;min-width:620px}
.oki-cmp th,.oki-cmp td{padding:15px 14px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center}
.oki-cmp tbody tr:last-child th,.oki-cmp tbody tr:last-child td{border-bottom:0}
.oki-cmp thead th{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-xs);
  letter-spacing:.11em;text-transform:uppercase;color:#b3a69c;
  padding-top:18px;padding-bottom:16px;vertical-align:bottom;line-height:1.3}
.oki-cmp thead th small{display:block;font-size:var(--ui-2xs);letter-spacing:.1em;
  color:#a89a8f;margin-top:3px;font-family:"Nunito",sans-serif;text-transform:none}
.oki-cmp thead th.us{color:#fff}
.oki-cmp thead th.us small{color:var(--blush)}
.oki-cmp tbody th{text-align:left;font-family:"Nunito",sans-serif;font-weight:400;
  font-size:var(--rd-sm);color:#d3c7bd;position:sticky;left:0;background:var(--walnut);
  min-width:210px;padding-left:18px}
.oki-cmp td.us{background:#3b302a}
.oki-cmp thead th.us{background:#3b302a}
.oki-mk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%}
.oki-mk.mk-y{background:rgba(133,163,74,.18);color:#a9c96b}
.oki-mk.mk-p{background:rgba(224,174,152,.15);color:var(--blush)}
.oki-mk.mk-n{background:rgba(255,255,255,.06);color:#7d7168}
.oki-cmpkey{margin-top:14px;font-size:var(--ui-xs);color:#b3a69c;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.oki-cmpkey b{font-weight:400;color:#c3b6ab;display:inline-flex;align-items:center;gap:7px}
.oki-cmpkey .oki-mk{width:20px;height:20px}
.oki-cmpkey .oki-mk svg{width:13px;height:13px}
.oki-cmpscroll{display:none;margin-top:10px;font-size:var(--ui-xs);color:#b3a69c}
@media(max-width:760px){
  .oki-cmpscroll{display:block}
  .oki-cmp th,.oki-cmp td{padding:12px 10px}
  .oki-cmp tbody th{min-width:170px;font-size:var(--rd-sm);padding-left:14px}
  .oki-cmp{min-width:540px}
}

/* ── tick lists ──────────────────────────────── */
.oki-ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.oki-ticks li{position:relative;padding-left:28px;font-size:var(--rd-md);color:#564e48}
.oki-ticks li::before{content:"";position:absolute;left:0;top:7px;width:17px;height:17px;
  border-radius:50%;background:rgba(85,107,47,.12)}
.oki-ticks li::after{content:"";position:absolute;left:5px;top:12px;width:7px;height:4px;
  border-left:1.6px solid var(--olive);border-bottom:1.6px solid var(--olive);
  transform:rotate(-45deg)}

/* ═══════════════════════════════════════════
   10. SPLIT + MATRIX + MISC HOME
   ═══════════════════════════════════════════ */
.oki-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:center}
.oki-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.oki-split .txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.oki-split.rev img{order:2}
@media(max-width:860px){.oki-split{grid-template-columns:1fr}.oki-split.rev img{order:0}}

.oki-next{background:var(--cream);border-block:1px solid var(--hairs)}
.oki-next .in{display:flex;gap:clamp(16px,3vw,40px);flex-wrap:wrap;align-items:center;
  padding-block:20px;font-size:var(--rd-sm);color:var(--muted)}
.oki-next b{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-2xs);
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink)}

.oki-matrix{width:100%;border-collapse:collapse;font-size:var(--rd-sm)}
.oki-matrix th,.oki-matrix td{padding:13px 14px;border-bottom:1px solid var(--hairs);text-align:left}
.oki-matrix thead th{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--ui-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.oki-matrix tbody th{font-family:"Poppins",sans-serif;font-weight:400;font-size:var(--rd-md)}
.oki-matrix tbody th small{display:block;color:var(--muted);font-size:var(--ui-xs);
  font-family:"Nunito",sans-serif}
.oki-matrix .now{color:var(--olive-d)}
.oki-matrix .soon{color:var(--muted)}
.oki-mwrap{overflow-x:auto}

/* quotes */
.oki-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
.oki-q{background:var(--cream);padding:26px 24px;border-radius:3px}
.oki-q h4{font-size:var(--rd-sm);font-weight:500;margin:0 0 8px}
.oki-q p{color:var(--muted);font-size:var(--rd-sm);margin:0}
.oki-q .who{margin-top:14px;font-size:var(--ui-xs);color:var(--clay-ink)}
@media(max-width:860px){.oki-quotes{grid-template-columns:1fr}}

/* journal grid */
.oki-jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,38px)}
.oki-jgrid article img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--cream)}
.oki-jgrid h2,.oki-jgrid h3{font-family:"Poppins",sans-serif;font-size:var(--rd-lg);font-weight:400;margin:16px 0 8px;line-height:1.3;letter-spacing:0}
.oki-jgrid p{color:var(--muted);font-size:var(--rd-md);margin:0;line-height:1.65}
.oki-jgrid .meta{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay-ink);margin-top:14px}
@media(max-width:860px){.oki-jgrid{grid-template-columns:1fr;gap:34px}}

/* FAQ — click a question to open its answer */
.oki-faq{border-top:1px solid var(--hair);margin:0 0 1.6em}
.oki-faq details{border-bottom:1px solid var(--hair)}
.oki-faq summary{list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;
  font-family:"Poppins",sans-serif;font-size:var(--fs-base);font-weight:500;line-height:1.4;
  color:var(--ink);transition:color .2s}
.oki-faq summary:hover{color:var(--clay)}
.oki-faq summary::-webkit-details-marker{display:none}
.oki-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-8px;border-right:1.5px solid var(--clay);border-bottom:1.5px solid var(--clay);
  transform:rotate(45deg);transition:transform .25s}
.oki-faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.oki-faq .a{padding:0 48px 24px 0;color:#564e48;max-width:68ch}
.oki-faq .a p{margin:0 0 .9em}
.oki-faq .a p:last-child{margin-bottom:0}
.oki-faq summary:focus-visible{outline:1.5px solid var(--olive);outline-offset:2px}
/* v2.7.9 */
/* product description: "## Heading" lines shown as headings */
.oki-desc-h{font-size:1.2rem;line-height:1.3;margin:1.8em 0 .5em}
h3.oki-desc-h{font-size:1.05rem}


/* newsletter */
.oki-nl{background:var(--cream)}
.oki-nl .oki-display{font-size:calc(clamp(27px,3.4vw,42px) * var(--h-scale))}
.oki-nl .oki-lede{text-align:center}
.oki-nl .admin-note{font-size:var(--ui-xs);color:var(--clay-ink);border:1px dashed var(--clay);
  padding:10px 14px;max-width:560px;margin:6px 0 0}
.oki-nl .in{padding-block:clamp(52px,7vw,92px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.oki-nl form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;width:100%}
.oki-nl input[type=email]{flex:1 1 260px;max-width:330px;padding:14px 16px;
  border:1px solid var(--hair);background:var(--white);border-radius:0;
  font-family:"Nunito",sans-serif;font-size:var(--rd-md);color:var(--ink)}
.oki-nl input[type=email]:focus{outline:1.5px solid var(--olive);outline-offset:-1px}
.oki-nl .fine{font-size:var(--ui-xs);color:var(--muted);margin:2px 0 0}

/* ── MailPoet form, dressed as ours ───────────────────────────
   MailPoet's form editor writes INLINE styles, which beat a normal
   stylesheet rule, so the properties it sets are forced here.  Selectors
   target the elements inside our section rather than MailPoet's class
   names, so this keeps working when MailPoet changes its markup.        */
.oki-nl .mailpoet_form{background:none !important;padding:0 !important;
  margin:0 !important;width:100% !important;max-width:none !important;
  border:0 !important;box-shadow:none !important}
.oki-nl .mailpoet_form_form,
.oki-nl form.mailpoet_form_form{display:flex !important;gap:10px;flex-wrap:wrap;
  justify-content:center;align-items:flex-start;width:100%;margin-top:6px}
.oki-nl .mailpoet_paragraph{margin:0 !important;padding:0 !important;
  flex:0 1 auto;line-height:1}
.oki-nl .mailpoet_paragraph:has(input[type=email]),
.oki-nl .mailpoet_paragraph:has(input[type=text]){flex:1 1 260px;max-width:330px}

.oki-nl .mailpoet_form input[type=email],
.oki-nl .mailpoet_form input[type=text]{
  width:100% !important;padding:14px 16px !important;
  border:1px solid var(--hair) !important;border-radius:0 !important;
  background:var(--white) !important;color:var(--ink) !important;
  font-family:"Nunito",sans-serif !important;font-size:var(--rd-md) !important;
  line-height:1.2 !important;box-shadow:none !important;height:auto !important}
.oki-nl .mailpoet_form input[type=email]:focus,
.oki-nl .mailpoet_form input[type=text]:focus{
  outline:1.5px solid var(--olive);outline-offset:-1px}
.oki-nl .mailpoet_form input::placeholder{color:var(--muted);opacity:1}

.oki-nl .mailpoet_form input[type=submit],
.oki-nl .mailpoet_form button[type=submit],
.oki-nl .mailpoet_submit{
  background:var(--olive) !important;border:1px solid var(--olive) !important;
  color:#fff !important;border-radius:0 !important;
  font-family:"Poppins",sans-serif !important;font-weight:400 !important;
  font-size:var(--ui-xs) !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;padding:15px 30px !important;
  line-height:1 !important;height:auto !important;width:auto !important;
  cursor:pointer;transition:background .25s,border-color .25s}
.oki-nl .mailpoet_form input[type=submit]:hover,
.oki-nl .mailpoet_form button[type=submit]:hover,
.oki-nl .mailpoet_submit:hover{
  background:var(--olive-d) !important;border-color:var(--olive-d) !important}

.oki-nl .mailpoet_validate_success,
.oki-nl .mailpoet_validate_error,
.oki-nl .mailpoet_message{flex:1 0 100%;font-family:"Nunito",sans-serif;
  font-size:var(--rd-sm);margin:4px 0 0 !important;text-align:center}
.oki-nl .mailpoet_validate_success{color:var(--olive-d) !important}
.oki-nl .mailpoet_validate_error{color:var(--clay) !important}
.oki-nl .mailpoet_hp_email_label{display:none !important}

@media (max-width:560px){
  .oki-nl .mailpoet_form_form,
  .oki-nl form.mailpoet_form_form{flex-direction:column;align-items:stretch}
  .oki-nl .mailpoet_paragraph:has(input[type=email]){max-width:none}
  .oki-nl .mailpoet_form input[type=submit],
  .oki-nl .mailpoet_form button[type=submit],
  .oki-nl .mailpoet_submit{width:100% !important}
}

/* reveal */
.oki-rv.pre{opacity:0;transform:translateY(14px)}
.oki-rv.pre.in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .oki-rv.pre{opacity:1;transform:none}
}

/* ── reviews ─────────────────────────────────── */
.oki-revs{background:var(--cream);border-block:1px solid var(--hairs)}
.oki-revs .in{padding-block:clamp(56px,8vw,104px)}
.oki-revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.oki-revgrid[data-count="1"]{grid-template-columns:minmax(0,640px);justify-content:center}
.oki-revgrid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.oki-rev{background:var(--cream);margin:0;padding:30px 28px 26px;
  display:flex;flex-direction:column;gap:16px}
.oki-rev blockquote{margin:0;font-size:var(--rd-md);line-height:1.62;color:var(--ink);
  text-wrap:pretty}
.oki-rev blockquote::before{content:"\201C";display:block;font-family:var(--serif);
  font-size:40px;line-height:.5;color:var(--blush);margin-bottom:14px}
.oki-rev figcaption{margin-top:auto;font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.oki-revnote{margin-top:20px;text-align:center;font-size:var(--ui-xs);color:var(--muted)}
@media(max-width:860px){
  .oki-revgrid,.oki-revgrid[data-count="2"]{grid-template-columns:1fr}
  .oki-rev{padding:26px 22px 22px}
  .oki-rev blockquote{font-size:var(--rd-md)}
}

/* ═══════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════ */
.oki-foot{background:var(--white);border-top:1px solid var(--hair);
  padding-block:clamp(48px,6vw,80px) 30px}
.oki-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(26px,4vw,56px)}
.oki-foot .bmark img{height:30px;width:auto;margin-bottom:14px}
.oki-foot .bmark p{color:var(--muted);font-size:var(--rd-sm);max-width:34ch}
.oki-foot h4{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 14px}
.oki-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.oki-foot ul a{font-size:var(--rd-sm)}
.oki-foot ul a:hover{color:var(--clay)}
.oki-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(34px,5vw,60px);padding-top:22px;border-top:1px solid var(--hairs);
  font-size:var(--ui-xs);color:var(--muted)}
@media(max-width:860px){.oki-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.oki-fgrid{grid-template-columns:1fr}}

/* ── free shipping progress ──────────────────── */
.oki-nl{scroll-margin-top:96px}
.oki-ship{background:var(--cream);border:1px solid var(--hair);border-radius:3px;
  padding:16px 18px 14px;margin-bottom:26px}
.oki-ship p{margin:0 0 10px;font-size:var(--rd-sm);color:var(--ink)}
.oki-ship--done p{color:var(--olive-d)}
.oki-shipbar{height:3px;background:var(--sand);border-radius:999px;overflow:hidden}
.oki-shipbar span{display:block;height:100%;background:var(--clay);
  transition:width .45s cubic-bezier(.2,.7,.3,1)}
.oki-ship--done .oki-shipbar span{background:var(--olive)}

/* ═══════════════════════════════════════════
   12. WOOCOMMERCE
   ═══════════════════════════════════════════ */
.woocommerce-page .oki-page,.oki-page{padding-block:clamp(40px,5vw,72px)}
.woocommerce .woocommerce-breadcrumb{font-size:var(--rd-sm);color:var(--muted);margin-bottom:26px}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}

/* product loop */
.woocommerce ul.products{display:grid;gap:clamp(20px,3vw,38px);margin:0;padding:0;list-style:none}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
.woocommerce ul.products.columns-4{grid-template-columns:repeat(4,1fr)}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
  text-align:left;list-style:none;position:relative;
  display:flex;flex-direction:column;align-items:flex-start}
.woocommerce ul.products li.product::marker{content:none}
.woocommerce ul.products li.product > a{display:block;width:100%}
.woocommerce ul.products li.product a img{margin:0 0 16px;border-radius:3px;background:var(--cream)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"Poppins",sans-serif;font-size:var(--fs-base);font-weight:400;
  padding:0;margin:0 0 7px;text-transform:none;letter-spacing:-0.01em}
.woocommerce ul.products li.product .price{color:var(--muted);font-size:var(--rd-md);font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{margin-top:14px}
.woocommerce span.onsale{position:absolute;z-index:2;background:var(--clay);color:#fff;border-radius:999px;
  font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.12em;
  text-transform:uppercase;min-height:0;min-width:0;padding:5px 12px;line-height:1;top:12px;left:12px;margin:0}
@media(max-width:900px){.woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4{grid-template-columns:1fr}}

/* single product */
.woocommerce div.product .product_title{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(26px,3.2vw,40px) * var(--h-scale));letter-spacing:-0.025em;margin-bottom:12px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--ink);font-family:"Poppins",sans-serif;font-size:calc(var(--fs-base) * 1.32);font-weight:400}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted)}
.woocommerce div.product form.cart div.quantity{margin-right:12px}
.woocommerce .quantity input.qty{border:1px solid var(--hair);height:46px;width:70px;
  background:var(--white);font-family:"Nunito",sans-serif}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin-bottom:26px;border-bottom:1px solid var(--hair)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;
  margin:0 26px 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:"Poppins",sans-serif;font-size:var(--ui-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:0 0 14px;display:block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--clay)}
/* variation swatches fallback: plain select */
.woocommerce div.product form.cart .variations{margin-bottom:18px}
.woocommerce div.product form.cart .variations label{font-family:"Poppins",sans-serif;
  font-size:var(--ui-2xs);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.woocommerce div.product form.cart .variations select{border:1px solid var(--hair);
  padding:12px 13px;background:var(--white);font-family:"Nunito",sans-serif;font-size:var(--rd-md)}

/* cart + checkout */
.woocommerce table.shop_table{border:1px solid var(--hair);border-radius:3px}
.woocommerce table.shop_table th{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.woocommerce table.shop_table td{border-top:1px solid var(--hairs)}
.woocommerce-cart table.cart img{width:72px;border-radius:3px}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-checkout h2{
  font-family:"Poppins",sans-serif;font-size:var(--rd-sm);letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--muted)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  border:1px solid var(--hair);border-radius:0;padding:13px 14px;height:auto;
  font-family:"Nunito",sans-serif;font-size:var(--rd-md);background:var(--white)}
.woocommerce form .form-row label{font-size:var(--rd-sm);color:var(--muted)}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  background:var(--cream);border-top-color:var(--clay);color:var(--ink);border-radius:0}
.woocommerce-info::before,.woocommerce-message::before{color:var(--clay)}
.woocommerce #payment{background:var(--cream);border-radius:3px}
.woocommerce #payment div.payment_box{background:var(--white);border-radius:3px}
.woocommerce #payment div.payment_box::before{border-bottom-color:var(--white)}

/* blog */
.oki-article{max-width:var(--readw);margin-inline:auto;padding-inline:var(--gut)}
.oki-article h1{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(28px,3.6vw,44px) * var(--h-scale));letter-spacing:-0.025em}
.oki-article h2{font-size:var(--rd-lg);margin:38px 0 14px;font-weight:500}
.oki-article p{margin-bottom:1.1em}
.oki-article .hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;
  margin-bottom:34px;background:var(--cream);border-radius:3px}
.oki-article .meta{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-ink);margin-bottom:12px}

/* ═══════════════════════════════════════════
   13. MOBILE — tighten so each section reads in one screen
   ═══════════════════════════════════════════ */
@media(max-width:760px){
  .oki-sect{padding-block:clamp(44px,11vw,64px)}
  .oki-display{font-size:calc(clamp(31px,8.6vw,44px) * var(--h-scale))}
  .oki-lede{font-size:1.04em}
  .oki-mat .in{padding-block:clamp(46px,11vw,70px)}
  .oki-mat .big{font-size:calc(clamp(23px,6.4vw,30px) * var(--h-scale))}
  .oki-feature{gap:26px}
  .oki-feature .name{font-size:calc(clamp(26px,7.4vw,34px) * var(--h-scale))}
  .oki-split{gap:24px}
  .oki-next .in{padding-block:16px;gap:8px;flex-direction:column;align-items:flex-start}
  .oki-foot{padding-block:40px 24px}
  .oki-legal{flex-direction:column;gap:8px}
  .oki-nl .in{padding-block:46px}
  .oki-matrix th,.oki-matrix td{padding:11px 10px;font-size:var(--rd-sm)}
  .oki-facts div{padding:18px 12px}
  .oki-facts small{font-size:var(--rd-sm);line-height:1.55}
  /* full-width primary buttons are easier to hit */
  .oki-buy{width:100%}
  .oki-buy .oki-btn{flex:1 1 auto;text-align:center}
  .woocommerce div.product form.cart .button{width:100%}
}
@media(max-width:400px){
  .oki-facts .row{grid-template-columns:1fr}
  .oki-facts div:nth-child(n+2){border-top:1px solid var(--hairs)}
  .oki-facts div{border-inline-start:0}
}

/* ═══════════════════════════════════════════
   14. PAGES, ARTICLES & PROSE
   Everything the WordPress editor outputs — Our Story, FAQ,
   Shipping & returns, Privacy, Terms, journal posts. Before this
   section these pages fell back to browser defaults.
   ═══════════════════════════════════════════ */

/* page header band -------------------------------------------------- */
/* the band is the top of the page, so drop the wrapper padding above it */
.oki-page:has(> .oki-phead),.oki-page:has(> .oki-shophead){padding-top:0}
.oki-phead{background:var(--cream);border-bottom:1px solid var(--hair);
  padding-block:clamp(44px,6vw,86px);text-align:center;margin-bottom:clamp(40px,5vw,68px)}
.oki-phead .oki-eyebrow{margin-bottom:14px}
.oki-phead h1{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(30px,4.2vw,54px) * var(--h-scale));letter-spacing:-0.028em;line-height:1.08;
  margin:0;text-wrap:balance}
.oki-h-serif .oki-phead h1{font-family:var(--serif)}
.oki-phead .sub{color:var(--muted);max-width:52ch;margin:16px auto 0;font-size:1.06em}

/* the prose itself --------------------------------------------------- */
.oki-article-body{font-size:1.06em;line-height:1.8;color:var(--ink)}
.oki-article-body > *:first-child{margin-top:0}
.oki-article-body p{margin:0 0 1.35em}
.oki-article-body h2{font-family:"Poppins",sans-serif;font-weight:500;
  font-size:1.42em;line-height:1.25;letter-spacing:-0.015em;
  margin:2.2em 0 .6em;color:var(--ink)}
.oki-h-serif .oki-article-body h2{font-family:var(--serif);font-weight:400}
.oki-article-body h2:first-child{margin-top:0}
.oki-article-body h3{font-family:"Poppins",sans-serif;font-weight:500;
  font-size:1.12em;letter-spacing:.01em;margin:1.9em 0 .5em}
.oki-article-body h4{font-family:"Poppins",sans-serif;font-weight:500;
  font-size:.86em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:1.8em 0 .5em}
.oki-article-body a{color:var(--clay-ink);border-bottom:1px solid rgba(167,111,98,.35);
  transition:border-color .2s}
.oki-article-body a:hover{border-bottom-color:var(--clay)}
.oki-article-body strong{font-weight:700;color:var(--ink)}
.oki-article-body em{font-style:italic}

.oki-article-body ul,.oki-article-body ol{margin:0 0 1.35em;padding-left:1.15em;color:var(--ink)}
.oki-article-body li{margin-bottom:.5em;padding-left:.2em}
.oki-article-body li::marker{color:var(--blush)}
.oki-article-body ul ul,.oki-article-body ol ol{margin:.5em 0 0}

.oki-article-body blockquote{margin:2em 0;padding:0 0 0 clamp(18px,3vw,30px);
  border-left:2px solid var(--blush);font-family:var(--serif);
  font-weight:300;font-size:1.22em;line-height:1.5;color:var(--ink)}
.oki-article-body blockquote p:last-child{margin-bottom:0}
.oki-article-body blockquote cite{display:block;font-family:"Poppins",sans-serif;
  font-style:normal;font-size:.62em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:14px}

.oki-article-body figure{margin:2.2em 0}
.oki-article-body img{border-radius:3px;margin-block:0}
.oki-article-body figcaption,.oki-article-body .wp-caption-text{
  font-size:.82em;color:var(--muted);text-align:center;margin-top:12px}
.oki-article-body hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}

.oki-article-body table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.94em}
.oki-article-body th,.oki-article-body td{padding:12px 14px;text-align:left;
  border-bottom:1px solid var(--hairs);vertical-align:top}
.oki-article-body th{font-family:"Poppins",sans-serif;font-weight:500;font-size:.82em;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:var(--cream);border-bottom-color:var(--hair)}
.oki-article-body .wp-block-table{overflow-x:auto}
.oki-article-body .wp-block-table th,.oki-article-body .wp-block-table td{border:0;border-bottom:1px solid var(--hairs)}
.oki-article-body .wp-block-table thead th{border-bottom:1px solid var(--hair)}
.oki-article-body tbody th{font-family:inherit;font-size:1em;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:600;background:transparent;min-width:9em}

.oki-article-body code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;
  background:var(--cream);padding:2px 6px;border-radius:3px}
.oki-article-body .wp-block-button__link{display:inline-block;background:var(--olive);
  color:#fff;border-radius:0;font-family:"Poppins",sans-serif;font-size:.74em;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 32px;border-bottom:0}

/* FAQ pages read as question / answer pairs -------------------------- */
.oki-article-body h2 + p,.oki-article-body h3 + p{margin-top:-.15em}

/* journal post ------------------------------------------------------- */
.oki-article{max-width:var(--prosew);margin-inline:auto;padding-inline:var(--gut)}
.oki-article h1{font-family:"Poppins",sans-serif;font-weight:300;
  font-size:calc(clamp(30px,3.9vw,50px) * var(--h-scale));letter-spacing:-0.028em;line-height:1.1;
  margin:0 0 .55em;text-wrap:balance}
.oki-article .meta{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
  letter-spacing:.17em;text-transform:uppercase;color:var(--clay-ink);margin-bottom:14px}
.oki-article .hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;
  margin-bottom:clamp(30px,4vw,48px);background:var(--cream);border-radius:3px}
.oki-article-foot{max-width:var(--prosew);margin:clamp(48px,6vw,80px) auto 0;
  padding:clamp(26px,3vw,38px) var(--gut) 0;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.oki-article-foot .back{display:inline-block;padding:10px 0;font-family:"Poppins",sans-serif;font-size:var(--ui-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.oki-article-foot .back:hover{color:var(--clay)}

/* journal grid ------------------------------------------------------- */
.oki-jgrid article a{display:block}
.oki-jgrid article img{transition:opacity .4s}
.oki-jgrid article a:hover img{opacity:.85}
.oki-jgrid article a:hover h2,.oki-jgrid article a:hover h3{color:var(--clay-ink)}
.oki-jgrid h2,.oki-jgrid h3{transition:color .2s}

/* pagination --------------------------------------------------------- */
.oki-page .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.oki-page .nav-links .page-numbers{padding:10px 16px;border:1px solid var(--hair);
  font-family:"Poppins",sans-serif;font-size:var(--rd-sm);line-height:1;color:var(--muted)}
.oki-page .nav-links .page-numbers:hover{border-color:var(--clay);color:var(--clay)}
.oki-page .nav-links .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═══════════════════════════════════════════
   15. WOOCOMMERCE — shop, cart, checkout, account
   ═══════════════════════════════════════════ */

/* shop / category header */
.oki-shophead{background:var(--cream);border-bottom:1px solid var(--hair);
  padding-block:clamp(40px,5.5vw,76px);text-align:center;margin-bottom:clamp(32px,4vw,54px)}
.oki-shophead h1,.woocommerce .oki-shophead .woocommerce-products-header__title{
  font-family:"Poppins",sans-serif;font-weight:300;font-size:calc(clamp(28px,3.8vw,48px) * var(--h-scale));
  letter-spacing:-0.028em;margin:0}
.oki-h-serif .oki-shophead h1{font-family:var(--serif)}
.oki-shophead .term-description{color:var(--muted);max-width:56ch;margin:16px auto 0}

/* sort + count row */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:26px;font-size:var(--rd-sm);color:var(--muted)}
.woocommerce .woocommerce-ordering select{border:1px solid var(--hair);border-radius:0;
  padding:9px 12px;background:var(--white);font-family:"Nunito",sans-serif;font-size:var(--rd-sm)}

/* cart ---------------------------------------------------------------- */
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:16px 14px}
.woocommerce table.cart td.product-thumbnail img,
.woocommerce-cart table.cart img{width:84px;max-width:84px}
.woocommerce-cart table.cart td.product-name a{font-family:"Poppins",sans-serif;font-size:var(--rd-md)}
.woocommerce a.remove{color:var(--muted)!important;font-weight:400;line-height:1}
.woocommerce a.remove:hover{background:none;color:var(--clay)!important}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;max-width:420px;float:right}
.woocommerce-cart .cart_totals table.shop_table{background:var(--cream)}
.woocommerce .cart-collaterals .cross-sells{margin-top:56px;float:none;width:100%}
.woocommerce table.cart td.actions .coupon .input-text{width:180px;margin-right:8px}

/* empty cart — WooCommerce ships a bare sentence here */
.woocommerce .cart-empty,.woocommerce-page .cart-empty{
  font-family:var(--serif);font-weight:300;font-size:calc(clamp(24px,3vw,34px) * var(--h-scale));
  color:var(--ink);text-align:center;padding-top:30px;border:0}
.woocommerce .return-to-shop{text-align:center;margin-top:24px}
.woocommerce .wc-empty-cart-message + p.return-to-shop .button{background:var(--olive);
  border-color:var(--olive);color:#fff}

/* checkout ------------------------------------------------------------ */
.woocommerce-checkout #customer_details{margin-bottom:34px}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:48%}
.woocommerce-checkout #order_review{background:var(--cream);padding:clamp(20px,3vw,32px);
  border:1px solid var(--hair)}
.woocommerce-checkout #order_review_heading{margin-top:0}
.woocommerce-checkout table.shop_table{background:transparent;border:0}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--hair);padding:0 0 18px}
.woocommerce #payment ul.payment_methods li{list-style:none}
.woocommerce #payment #place_order{width:100%;font-size:var(--rd-sm);padding:19px 24px}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--red,#b3502f)}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:var(--rd-sm);color:var(--muted)}
@media(max-width:780px){
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2{width:100%;float:none}
}

/* order received ------------------------------------------------------ */
.woocommerce .woocommerce-order{max-width:760px;margin-inline:auto}
.woocommerce ul.order_details{background:var(--cream);padding:24px;margin:0 0 34px;
  display:flex;flex-wrap:wrap;gap:22px}
.woocommerce ul.order_details li{border:0;padding:0;margin:0;float:none;
  font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.woocommerce ul.order_details li strong{display:block;font-family:"Nunito",sans-serif;
  font-size:var(--rd-md);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:5px}

/* my account ----------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation{width:24%}
.woocommerce-account .woocommerce-MyAccount-content{width:71%}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--hair)}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--hair)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 0;
  font-family:"Poppins",sans-serif;font-size:var(--rd-sm);letter-spacing:.04em;color:var(--muted)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--ink)}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{border:1px solid var(--hair);border-radius:0;
  padding:clamp(22px,3vw,34px)}
@media(max-width:780px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
  .woocommerce-account .woocommerce-MyAccount-content{margin-top:30px}
}

/* notices -------------------------------------------------------------- */
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  font-size:var(--rd-md);padding:16px 18px 16px 48px;line-height:1.6}
.woocommerce-message .button,.woocommerce-info .button{font-size:var(--ui-2xs);padding:11px 18px}

/* ── cart + order tables stack on a phone ─────────────────────
   WooCommerce ships its own responsive-table CSS, but it is easy to
   lose to a theme rule or a plugin. This makes the stacking ours, so
   the cart can never run off the side of a phone screen.          */
@media(max-width:600px){
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody,
  .woocommerce table.shop_table_responsive tr,
  .woocommerce table.shop_table_responsive td{display:block;width:100%}
  .woocommerce table.shop_table_responsive thead{display:none}
  .woocommerce table.shop_table_responsive tr{
    border-bottom:1px solid var(--hair);padding:16px 0;position:relative}
  .woocommerce table.shop_table_responsive tr:last-child{border-bottom:0}
  .woocommerce table.shop_table_responsive td{
    border:0;padding:5px 0;text-align:right;
    display:flex;justify-content:space-between;align-items:center;gap:14px}
  .woocommerce table.shop_table_responsive td::before{
    content:attr(data-title);font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}
  .woocommerce table.shop_table_responsive td.product-thumbnail::before,
  .woocommerce table.shop_table_responsive td.product-remove::before{content:none}
  .woocommerce table.shop_table_responsive td.product-thumbnail{justify-content:flex-start}
  .woocommerce table.cart td.product-thumbnail img,
  .woocommerce-cart table.cart img{width:96px;max-width:96px}
  .woocommerce table.shop_table_responsive td.actions{
    display:block;text-align:left;padding-top:18px}
  .woocommerce table.cart td.actions .coupon{display:flex;gap:8px;margin-bottom:12px}
  .woocommerce table.cart td.actions .coupon .input-text{width:auto;flex:1 1 auto;margin:0}
  .woocommerce table.cart td.actions .button{width:100%}
  .woocommerce-cart .cart-collaterals .cart_totals{max-width:none;float:none}
  .woocommerce ul.order_details{flex-direction:column;gap:16px}
}

/* ═══════════════════════════════════════════
   16. v2.3 ADDITIONS
   ═══════════════════════════════════════════ */

/* Phones zoom the page when a form field is under 16px. */
.oki-nl input[type=email],
.oki-nl .mailpoet_form input[type=email],
.oki-nl .mailpoet_form input[type=text],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .variations select{font-size:max(16px,var(--rd-md)) !important}

/* ── mobile hero: photo on top, words underneath ──────────────
   Over a phone-sized crop the headline sat on the plate itself and the
   wash that kept it readable hid the product. Stacking keeps both.   */
@media(max-width:760px){
  .oki-hero,.oki-hero--medium,.oki-hero--short{min-height:0;display:block;background:var(--cream)}
  .oki-hero picture{display:block}
  .oki-hero-media{position:relative;inset:auto;z-index:auto;aspect-ratio:5/4}
  .oki-hero-video{object-position:50% center}
  .oki-hero-video.shared{object-position:94% center}
  .oki-hero .oki-hero-img,.oki-hero.a-left .oki-hero-img{object-position:94% center}
  .oki-hero-scrim{display:none}
  .oki-hero-in{padding-block:30px 40px}
  .oki-hero .copy{gap:16px}
  .oki-hero.t-light .oki-display,.oki-hero.t-light .oki-lede{color:var(--ink);text-shadow:none}
  .oki-hero.t-light .oki-display em{color:var(--clay)}
  .oki-hero.t-light .oki-eyebrow{color:var(--clay);text-shadow:none}
  .oki-hero.t-light .oki-btn.solid{background:var(--olive);border-color:var(--olive);color:#fff}
  .oki-hero.t-light .oki-tlink{color:var(--ink);border-bottom-color:var(--hair)}
  .oki-hero .oki-lede{font-size:var(--fs-base)}
}

/* journal card art — a post with no featured image gets a quiet
   illustrated card for its topic instead of an empty box */
.oki-jart{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;border-radius:3px;overflow:hidden;
  background:var(--jbg,var(--soft));color:var(--jfg,var(--clay));
  transition:opacity .4s}
.oki-jart svg{width:34%;height:auto;max-width:150px}
.oki-jart::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.42)}
.oki-jart svg{position:relative}
.oki-jart .lab{position:absolute;left:20px;bottom:16px;font-family:"Poppins",sans-serif;
  font-size:var(--ui-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--jfg,var(--clay))}
.oki-jart.tone-sand {--jbg:#efe0d5;--jfg:#7f4e40}
.oki-jart.tone-blush{--jbg:#f3e2da;--jfg:#84523f}
.oki-jart.tone-sky  {--jbg:#e2e9ec;--jfg:#4f6877}
.oki-jart.tone-sage {--jbg:#e3e7d8;--jfg:#4f6230}
.oki-jart.tone-cream{--jbg:#f4ece2;--jfg:#6f5443}
.oki-jgrid article a:hover .oki-jart{opacity:.88}
.oki-article .hero-art{margin-bottom:clamp(30px,4vw,48px)}
.oki-article .hero-art .oki-jart{aspect-ratio:16/7}
.oki-article .hero-art .oki-jart svg{width:18%}
.oki-article .hero-art .oki-jart::before{width:34%}

/* journal list rendered on a page called "Journal" */
.oki-page-journal .oki-wrap{padding-bottom:10px}

/* Our story image */
.oki-story-img{max-width:var(--readw);margin:0 auto clamp(40px,5vw,64px);padding-inline:var(--gut)}
.oki-story-img img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:3px}

/* text the owner still has to fill — shown to logged-in admins only */
.oki-fill{background:#fff1ea;outline:1px dashed var(--clay);color:var(--clay);
  padding:0 4px;font-size:.92em}

/* shop header row count */
.oki-shophead .oki-eyebrow{margin-bottom:12px}

/* ── hero video ─────────────────────────────────────────────── */
.oki-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-focus,50%) center;opacity:0;transition:opacity .9s ease}
.oki-hero.is-playing .oki-hero-video{opacity:1}
.oki-hero-pause{position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:3;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(42,37,33,.18);
  background:rgba(255,253,250,.78);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.oki-hero-pause[hidden]{display:none}
.oki-hero-pause:hover{background:#fff}
.oki-hero-pause .i-play{display:none}
.oki-hero.is-paused .oki-hero-pause .i-play{display:block}
.oki-hero.is-paused .oki-hero-pause .i-pause{display:none}
@media(max-width:760px){
  /* on a phone the button sits on the video, above the words */
  .oki-hero-pause{top:calc(80vw - 52px);bottom:auto;right:14px}
}

/* ── hero with video ──────────────────────────────────────────
   The okiboo table video already carries a soft, blurred, cream-washed
   left side for the headline, so the wash on top of it is much lighter
   than the one a random photo needs. The plate sits on the right.     */
.oki-hero.has-video .oki-hero-img,
.oki-hero.has-video .oki-hero-video{object-position:70% center}
.oki-hero.vid-okiboo.t-dark .oki-hero-scrim::before{
  background:linear-gradient(to top,rgba(255,253,250,.50) 0%,rgba(255,253,250,.22) 30%,transparent 60%)}
.oki-hero.vid-okiboo.t-dark.a-left .oki-hero-scrim::after{
  background:linear-gradient(to right,rgba(255,253,250,.40) 0%,rgba(255,253,250,.14) 36%,transparent 52%)}
.oki-hero.vid-okiboo.t-light .oki-hero-scrim::before{
  background:linear-gradient(to top,rgba(26,20,16,.62) 0%,rgba(26,20,16,.30) 34%,transparent 64%)}
.oki-hero.vid-okiboo.t-light.a-left .oki-hero-scrim::after{
  background:linear-gradient(to right,rgba(26,20,16,.40) 0%,rgba(26,20,16,.14) 38%,transparent 55%)}
/* Computer: the video's calm, blurred side is on the left. Anchor the
   crop to that side so narrower windows trim the napkin, not the text
   space, and keep the paragraph short enough to end before the plate. */
@media(min-width:1024px){
  .oki-hero.has-video .oki-hero-img,
  .oki-hero.has-video .oki-hero-video{object-position:15% center}
  .oki-hero.has-video .copy{max-width:min(560px,42vw)}
  .oki-hero.has-video .oki-lede{max-width:34ch}
}
/* Tablet: stack like a phone - the plate-centred cut on top, words below */
@media(min-width:761px) and (max-width:1023px){
  .oki-hero.has-video{min-height:0;display:block;background:var(--cream)}
  .oki-hero.has-video .oki-hero-media{position:relative;inset:auto;z-index:auto;aspect-ratio:16/10}
  .oki-hero.has-video .oki-hero-img,
  .oki-hero.has-video .oki-hero-video{object-position:50% 55%}
  .oki-hero.has-video .oki-hero-scrim{display:none}
  .oki-hero.has-video .oki-hero-in{padding-block:40px 56px}
  .oki-hero.has-video .copy{max-width:640px}
  .oki-hero.has-video.t-light .oki-display,.oki-hero.has-video.t-light .oki-lede{color:var(--ink);text-shadow:none}
  .oki-hero.has-video.t-light .oki-display em{color:var(--clay)}
  .oki-hero.has-video.t-light .oki-eyebrow{color:var(--clay);text-shadow:none}
  .oki-hero.has-video.t-light .oki-btn.solid{background:var(--olive);border-color:var(--olive);color:#fff}
  .oki-hero.has-video.t-light .oki-tlink{color:var(--ink);border-bottom-color:var(--hair)}
  .oki-hero.has-video .oki-hero-pause{top:calc(62.5vw - 54px);bottom:auto}
}
@media(max-width:760px){
  .oki-hero.has-video .oki-hero-img,
  .oki-hero.has-video .oki-hero-video{object-position:50% center}
}

/* ═══════════════════════════════════════════
   JOURNAL PICTURES (inc/journal-media.php)
   ═══════════════════════════════════════════ */
.oki-article-body .oki-jfig{margin:2.4em auto}
.oki-jfig img{display:block;width:100%;height:auto;border-radius:3px;background:var(--cream)}
.oki-jfig.narrow{max-width:460px}
.oki-jfig.slim{max-width:300px}
.oki-jfig.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px);align-items:start}
.oki-jfig.pair figcaption{grid-column:1/-1}
.oki-jfig figcaption{font-size:.82em;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}
.oki-article img.hero-img{height:auto}
@media(max-width:760px){
  .oki-article-body .oki-jfig{margin:1.8em auto}
  .oki-jfig.narrow{max-width:100%}
  .oki-jfig.slim{max-width:240px}
  .oki-jfig.pair.stack{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   v2.6.1 — review fixes
   ═══════════════════════════════════════════ */
@media(min-width:761px){.oki-legal{align-items:center}}
.oki-legal a{display:inline-block;padding:8px 2px}
.oki-social{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}
.oki-social a{display:inline-flex;align-items:center;gap:8px;padding:6px 0;
  font-family:"Poppins",sans-serif;font-size:var(--ui-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.oki-social a:hover{color:var(--clay-ink)}
.oki-social svg{width:18px;height:18px}
.oki-article-body a[href^="mailto:"],.oki-page a[href^="mailto:"]{color:var(--clay-ink);border-bottom:1px solid rgba(138,86,72,.35)}

/* ═══════════════════════════════════════════
   v2.7 — block cart & checkout, multi-buy offer
   ═══════════════════════════════════════════ */
[hidden].oki-bar,[hidden].oki-mbnote,[hidden].oki-mbnudge,
[hidden].oki-ship,[hidden].oki-flownotes{display:none!important}

/* slim page header on cart / checkout / account: get to the form sooner */
.oki-phead--slim{padding-block:clamp(26px,3.4vw,44px);margin-bottom:clamp(24px,3vw,40px)}
.oki-phead--slim h1{font-size:calc(clamp(26px,3vw,38px) * var(--h-scale))}

/* the WooCommerce blocks sit full width in the site container */
.oki-flow{padding-bottom:clamp(40px,6vw,80px)}
.oki-flow .wp-block-woocommerce-cart,.oki-flow .wp-block-woocommerce-checkout{
  max-width:none;margin-inline:0;font-family:"Nunito",sans-serif;color:var(--ink)}
.oki-flow a{color:inherit}
.oki-flow .wc-block-components-product-name{font-family:"Poppins",sans-serif;font-weight:400;
  font-size:var(--rd-md);color:var(--ink);text-decoration:none}
.oki-flow .wc-block-components-product-name:hover{color:var(--clay-ink)}
.oki-flow .wc-block-cart-item__image img{border-radius:3px;background:var(--cream)}
.oki-flow .wc-block-components-title,.oki-flow .wc-block-cart__totals-title,
.oki-flow .wc-block-components-checkout-step__title{
  font-family:"Poppins",sans-serif!important;font-weight:500!important;
  font-size:var(--ui-sm)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--ink)}
.oki-flow .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.oki-flow .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:"Poppins",sans-serif;font-weight:500}

/* buttons: "Proceed to checkout" and "Place order" look like the site's solid button */
.oki-flow .wc-block-components-button:not(.is-link){
  background:var(--olive)!important;border:1px solid var(--olive)!important;color:#fff!important;
  border-radius:0!important;font-family:"Poppins",sans-serif!important;font-weight:400!important;
  font-size:var(--ui-sm)!important;letter-spacing:.1em;text-transform:uppercase;
  min-height:56px;padding:16px 28px!important;box-shadow:none!important;text-decoration:none!important;
  transition:background .25s,border-color .25s}
.oki-flow .wc-block-components-button:not(.is-link):hover,
.oki-flow .wc-block-components-button:not(.is-link):focus{background:var(--olive-d)!important;border-color:var(--olive-d)!important}
.oki-flow .wc-block-components-button:not(.is-link) .wc-block-components-button__text{color:#fff}
.oki-flow .wc-block-components-totals-coupon__button,
.oki-flow .wc-block-components-button.outlined{
  background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important;min-height:48px}
.oki-flow .wc-block-components-totals-coupon__button:hover,
.oki-flow .wc-block-components-button.outlined:hover{background:var(--ink)!important;color:#fff!important}
.oki-flow .wc-block-components-button.is-link{color:var(--clay-ink)!important}

/* fields */
.oki-flow .wc-block-components-text-input input,
.oki-flow .wc-block-components-combobox .wc-block-components-combobox-control input,
.oki-flow .wc-blocks-components-select .wc-blocks-components-select__select,
.oki-flow .wc-block-components-textarea{border-radius:2px!important;font-family:"Nunito",sans-serif}
.oki-flow .wc-block-components-text-input.is-active input:focus,
.oki-flow .wc-block-components-text-input input:focus{outline:1.5px solid var(--olive);outline-offset:-1px;box-shadow:none}
.oki-flow .wc-block-components-radio-control__input:checked::before{background:var(--olive)}
.oki-flow .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--olive);border-color:var(--olive)}

/* the box above the blocks: free shipping + multi-buy nudge */
.oki-flownotes{max-width:760px;margin:0 auto clamp(18px,2.4vw,28px)}
.oki-flownotes .oki-ship{margin-bottom:10px}

/* multi-buy offer ----------------------------------------------------- */
.oki-bar--offer{background:var(--clay-ink);color:#fff}
.oki-bar--offer a{color:#fff}
.oki-bar--offer a:hover{text-decoration:underline;text-underline-offset:3px}
.oki-mbnote{margin:6px 0 18px;padding:12px 14px;background:var(--cream);border-left:2px solid var(--clay);
  font-size:var(--rd-sm);line-height:1.55;color:var(--ink)}
.oki-mbnote b{font-weight:600;color:var(--clay-ink)}
.oki-mbnote--home{margin:18px 0 0;max-width:460px}
.oki-mbnudge{margin:0 0 18px;padding:12px 16px;border:1px solid var(--hair);border-radius:3px;
  background:var(--white);font-size:var(--rd-sm);color:var(--ink)}
.oki-mbnudge.is-short{border-color:rgba(167,111,98,.45);background:var(--cream)}
.oki-mbnudge.is-done{border-color:rgba(85,107,47,.35);color:var(--olive-d)}
.oki-mbnudge.is-code{color:var(--muted)}
.oki-flownotes .oki-mbnudge{margin-bottom:0}
/* the offer applies itself, so its chip has no remove button */
.oki-mbchip .wc-block-components-chip__remove{display:none}
.oki-flow h3.wc-block-components-product-name,.oki-flow .wc-block-components-product-name{
  text-transform:none;letter-spacing:0;font-family:"Poppins",sans-serif;font-weight:400;
  font-size:var(--rd-md);line-height:1.35;color:var(--ink);margin:0}
/* "Sale!" badge: darker clay so the small white text passes AA */
.woocommerce span.onsale{background:var(--clay-ink)}
/* empty cart: WooCommerce suggests products with block buttons */
.oki-flow .wp-block-button__link,.oki-flow .wc-block-components-product-button__button{
  background:var(--olive)!important;color:#fff!important;border:1px solid var(--olive)!important;border-radius:0!important;
  font-family:"Poppins",sans-serif;font-size:var(--ui-xs)!important;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px!important;text-decoration:none!important}
.oki-flow .wp-block-button__link:hover,.oki-flow .wc-block-components-product-button__button:hover{background:var(--olive-d)!important;border-color:var(--olive-d)!important}
.oki-flow .wc-block-cart__empty-cart__title,.oki-flow .wp-block-heading{font-family:"Poppins",sans-serif;font-weight:300;color:var(--ink)}
.oki-flow .wc-block-components-product-price,.oki-flow .wc-block-grid__product-price{color:var(--muted)}

/* WooCommerce "Review your order" page (review-request email lands here) */
.oki-flow .woocommerce-review-order{max-width:760px;margin:0 auto;padding-top:clamp(8px,2vw,24px)}
.oki-flow .woocommerce-review-order__meta{font-size:var(--rd-sm);color:var(--muted);margin-bottom:10px}
.oki-flow .woocommerce-review-order__title,.oki-flow .woocommerce-review-order__empty-title{
  font-family:"Poppins",sans-serif;font-weight:300;letter-spacing:-0.02em;
  font-size:calc(clamp(28px,3.4vw,40px) * var(--h-scale));margin:0 0 12px}
.oki-h-serif .oki-flow .woocommerce-review-order__title{font-family:var(--serif)}
.oki-flow .woocommerce-review-order__intro{color:var(--muted)}
.oki-flow .woocommerce-review-order__items{list-style:none;margin:0;padding:0}
.oki-flow .woocommerce-review-order__item{border-top:1px solid var(--hair);padding:22px 12px;margin:0;border-radius:3px;transition:background .3s}
.oki-flow .woocommerce-review-order__item.oki-rv-picked{background:var(--cream)}
.oki-flow .woocommerce-review-order__item-title a{color:var(--ink);text-decoration:none;font-family:"Poppins",sans-serif;font-size:var(--rd-md)}
.oki-flow .woocommerce-review-order__item-title a:hover{color:var(--clay-ink)}
.oki-flow .woocommerce-review-order__item-variation{display:block;color:var(--muted);font-size:var(--rd-sm)}
.oki-flow .woocommerce-review-order__item-image img{border-radius:3px;background:var(--cream)}
.oki-flow .woocommerce-star-rating{color:#c8962f}
.oki-flow .woocommerce-star-rating__icon{width:30px;height:30px}
.oki-flow .woocommerce-star-rating__caption{color:var(--ink);opacity:.8}
.oki-flow .woocommerce-review-order__item-review-textarea{width:100%;font-family:"Nunito",sans-serif;font-size:var(--rd-md);
  border:1px solid var(--hair);border-radius:2px;padding:10px 12px;background:var(--white)}
.oki-flow .woocommerce-review-order__item-review-textarea:focus{outline:1.5px solid var(--olive);outline-offset:-1px}
.oki-flow .woocommerce-review-order__submit{background:var(--olive);border:1px solid var(--olive);color:#fff;border-radius:0;
  font-family:"Poppins",sans-serif;font-size:var(--ui-sm);letter-spacing:.1em;text-transform:uppercase;padding:17px 32px;cursor:pointer}
.oki-flow .woocommerce-review-order__submit:hover{background:var(--olive-d);border-color:var(--olive-d)}
.oki-flow .woocommerce-review-order__submit:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   v2.7.2 — shipment tracking on the order page (My account, thank-you)
   ============================================================ */
.oki-track{border:1px solid var(--hair);background:var(--cream);padding:18px 22px;margin:0 0 28px}
.oki-track__title{font-size:calc(var(--rd-sm) * var(--ui-scale));font-family:"Poppins",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;margin:0 0 10px;color:var(--ink)}
.oki-track__row{margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--ink)}
.oki-track__row:last-child{margin-bottom:0}
.oki-track__num{font-variant-numeric:tabular-nums;word-break:break-all}
.oki-track__btn{display:inline-block;background:var(--olive);color:#fff !important;text-decoration:none;
  font-family:"Poppins",sans-serif;font-size:calc(var(--rd-sm) * var(--ui-scale));letter-spacing:.08em;text-transform:uppercase;padding:10px 20px}
.oki-track__btn:hover{background:var(--olive-d)}
/* customer notes on the order page carry long tracking links: wrap them instead of widening the page */
.woocommerce-OrderUpdates .woocommerce-OrderUpdate-description,.woocommerce-OrderUpdate-description p{overflow-wrap:anywhere}

/* ============================================================
   v2.7.5 — product options as buttons, aligned add-to-cart row
   ============================================================ */
/* options: label above, every choice visible (buttons from okiboo-variations.js) */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{display:block;width:100%;padding:0;border:0;text-align:left}
.woocommerce div.product form.cart table.variations tr{margin-bottom:18px}
.woocommerce div.product form.cart table.variations th{margin-bottom:9px;line-height:1.4}
.woocommerce div.product form.cart .variations select.oki-pills-src{display:none !important}
.oki-pills{display:flex;flex-wrap:wrap;gap:10px}
.oki-pill{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:9px 18px;
  border:1px solid var(--hair);border-radius:999px;background:var(--white);color:var(--ink);
  font-family:"Nunito",sans-serif;font-size:max(15px,var(--rd-md));line-height:1.2;cursor:pointer;
  transition:border-color .15s,background .15s}
.oki-pill:hover{border-color:var(--ink)}
.oki-pill[aria-pressed="true"]{border-color:var(--olive);box-shadow:inset 0 0 0 1px var(--olive);background:var(--cream)}
.oki-pill.is-off{color:var(--muted);border-style:dashed}
.oki-pill:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.oki-pill__dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(42,37,33,.18);flex:none}
.woocommerce div.product form.cart .reset_variations{display:inline-block;margin-top:10px;font-size:var(--ui-sm);color:var(--muted)}
/* without the buttons (no JS, or 30+ variations): a dropdown that looks like one */
.woocommerce div.product form.cart .variations select{appearance:none;-webkit-appearance:none;min-width:240px;max-width:100%;
  padding-right:42px;cursor:pointer;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232a2521' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center}
/* quantity + Add to cart: one row, same height, button text centred */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;align-items:stretch;gap:12px;flex-wrap:nowrap}
.woocommerce div.product form.cart:not(.variations_form)::before,.woocommerce div.product form.cart:not(.variations_form)::after{display:none}
.woocommerce div.product form.cart div.quantity{margin:0;float:none;flex:none;display:flex}
.woocommerce div.product form.cart .quantity input.qty{height:56px;width:76px;text-align:center}
.woocommerce div.product form.cart .single_add_to_cart_button{float:none;flex:1 1 auto;min-height:56px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0}
/* headlines: no joined "fi"/"fl" (the f's hook swallowed the i's dot in "first") */
h1,h2,h3,.oki-display,.oki-sect-title,.oki-mat .big,.oki-feature .name,.oki-rev blockquote{font-variant-ligatures:no-common-ligatures}
/* v2.7.6 — the chosen option is filled, so it reads at a glance */
.oki-pill[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:#fff;font-weight:700;box-shadow:none}
.oki-pill[aria-pressed="true"]:hover{background:var(--olive-d);border-color:var(--olive-d)}
.oki-pill[aria-pressed="true"] .oki-pill__dot{box-shadow:0 0 0 2px #fff}
.oki-pill.is-off{border-style:solid;color:var(--muted)}
.oki-article .meta a{color:inherit;border-bottom:1px solid var(--hair);text-decoration:none}
.oki-article .meta a:hover{border-bottom-color:currentColor}
.oki-rules p a{color:var(--clay-ink);border-bottom:1px solid rgba(138,86,72,.35);text-decoration:none;white-space:nowrap}
.oki-rules p a:hover{border-bottom-color:var(--clay)}
/* v2.7.17 — the smell test, the age line, the gift row */
.oki-smell-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.oki-smell .hd{display:flex;flex-direction:column;gap:14px}
.oki-smell .hd .oki-sect-title{max-width:17ch}
.oki-smell .bd{display:flex;flex-direction:column;align-items:flex-start}
.oki-smell .bd p{margin:0 0 1.05em;color:#564e48;font-size:var(--rd-md);line-height:1.72;max-width:58ch}
.oki-smell .bd p:first-child{color:var(--ink);font-size:var(--fs-base);line-height:1.62}
.oki-smell .bd .oki-tlink{margin-top:6px}
.oki-smell-fig{margin:clamp(34px,4.5vw,56px) 0 0}
.oki-smell-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;background:var(--cream)}
.oki-smell-fig figcaption{margin-top:12px;font-size:var(--ui-xs);color:var(--muted)}
@media(max-width:860px){.oki-smell-in{grid-template-columns:1fr;gap:22px}}
.oki-age{margin:0;font-size:var(--rd-sm);color:var(--muted)}
.oki-gift{margin-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
.oki-gift > *{background:var(--cream);margin:0}
.oki-gift .txt{padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.oki-gift .txt .oki-ic{color:var(--clay)}
.oki-gift h3{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--rd-md);margin:0;letter-spacing:-0.005em}
.oki-gift .txt p{margin:0;color:var(--muted);font-size:var(--rd-sm);line-height:1.6;max-width:52ch}
.oki-giftq{padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.oki-giftq blockquote{margin:0;font-size:var(--rd-md);line-height:1.62;color:var(--ink);text-wrap:pretty}
.oki-giftq blockquote::before{content:"\201C";display:block;font-family:var(--serif);
  font-size:40px;line-height:.5;color:var(--blush);margin-bottom:14px}
.oki-giftq figcaption{font-family:"Poppins",sans-serif;font-size:var(--ui-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.oki-gift.has-img{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.oki-gift .shot{grid-row:1 / span 2;width:100%;height:100%;min-height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.oki-gift.has-img .txt,.oki-gift.has-img .oki-giftq{grid-column:2}
@media(max-width:760px){.oki-gift,.oki-gift.has-img{grid-template-columns:1fr}
  .oki-gift .shot{grid-row:auto;height:auto}.oki-gift.has-img .txt,.oki-gift.has-img .oki-giftq{grid-column:1}
  .oki-gift .txt,.oki-giftq{padding:22px 20px}}

/* v2.7.18 — sale price, two-plate sets */
.oki-buy .amt del{color:var(--muted);font-weight:300;margin-right:6px;font-size:.82em}
.oki-buy .amt ins{text-decoration:none;color:var(--clay-ink)}
.oki-mbnote--sale{border-left-color:var(--clay-ink)}
.oki-bar--sale a{font-weight:600}
.oki-setgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.oki-set{background:var(--white);padding:26px 22px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.oki-set .pair{display:flex;justify-content:center;margin-bottom:6px}
.oki-set .pair img{width:118px;height:118px;object-fit:cover;border-radius:50%;background:var(--cream);border:3px solid var(--white);box-shadow:0 0 0 1px var(--hairs)}
.oki-set .pair img + img{margin-left:-26px}
.oki-set h3{font-family:"Poppins",sans-serif;font-weight:500;font-size:var(--rd-md);margin:0}
.oki-set .price{margin:0;font-size:var(--rd-md)}
.oki-set .price del,.oki-setmini del{color:var(--muted);margin-right:6px;font-size:.9em}
.oki-set .price ins,.oki-setmini ins{text-decoration:none;color:var(--clay-ink);font-weight:600}
.oki-setform{margin:6px 0 0}
.oki-setform .oki-btn{cursor:pointer}
.oki-setmini{margin:22px 0 0;padding:16px 18px;background:var(--cream);border-radius:3px}
.oki-setmini .hd{margin:0 0 12px;font-size:var(--rd-sm);color:var(--ink);line-height:1.55}
.oki-setmini .btns{display:flex;flex-wrap:wrap;gap:8px}
.oki-setmini .oki-setform{margin:0}
.oki-setmini .oki-pill{cursor:pointer;font:inherit;font-size:var(--ui-sm)}
@media(max-width:860px){.oki-setgrid{grid-template-columns:1fr}.oki-set{padding:20px 18px}.oki-set .pair img{width:92px;height:92px}.oki-set .pair img + img{margin-left:-20px}}