/* ==========================================================================
   Bikaoo — design tokens & base
   Ported 1:1 from the Shopify theme settings (config/settings_data.json)
   plus the "Jawad Style" typography layer.
   NOTE: root font-size is 62.5% so 1rem = 10px, matching the source theme.
   ========================================================================== */

:root{
  /* ---- brand ---- */
  --bk-ink:#151719;
  --bk-ink-soft:#1a1a1a;
  --bk-coral:#ff735f;
  --bk-coral-dark:#ff654f;
  --bk-coral-deep:#ff604c;
  --bk-coral-light:#ff8d79;
  --bk-coral-wash:#fff1ed;
  --bk-brass:#c9a24b;
  --bk-brass-alt:#d2a13b;
  --bk-teal:#088287;
  --bk-teal-alt:#22a99d;
  --bk-whatsapp:#25d366;
  --bk-whatsapp-dark:#1ebe5d;
  --bk-cream:#f6f4ef;
  --bk-sand:#e7e2d8;
  --bk-sand-light:#f4ede4;
  --bk-warm:#f7f3ec;
  --bk-muted:#6f6a63;

  /* ---- jawad-style aliases ---- */
  --jw-ink:26,26,26;
  --jw-brass:201,162,75;

  /* ---- layout ---- */
  --page-width:1600px;
  --page-gutter:1.5rem;
  --spacing-sections:0px;
  --grid-gap-h:8px;
  --grid-gap-v:8px;

  /* ---- type ---- */
  --font-body-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body-weight:400;
  --font-body-weight-bold:600;
  --font-heading-weight:500;
  --font-body-scale:1.0;
  --font-heading-scale:1.4;

  /* ---- radii (buttons 10, inputs 10, variant pills 0, card 15, media 16) ---- */
  --buttons-radius:10px;
  --buttons-border-width:1px;
  --buttons-border-opacity:1.0;
  --inputs-radius:10px;
  --inputs-border-width:1px;
  --inputs-border-opacity:0.55;
  --variant-pills-radius:0px;
  --variant-pills-border-width:1px;
  --variant-pills-border-opacity:0.55;
  --card-corner-radius:15px;
  --card-border-width:0px;
  --card-border-opacity:0.1;
  --media-radius:16px;
  --media-border-width:1px;
  --media-border-opacity:0.05;
  --badge-corner-radius:0px;
  --popup-corner-radius:0px;
  --text-boxes-radius:0px;

  /* ---- motion ---- */
  --duration-short:100ms;
  --duration-default:200ms;
  --duration-long:500ms;
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);
}

/* ---- colour schemes, mirrored from settings_data.json ---- */
.color-scheme-1{--color-background:255,255,255;--color-foreground:26,26,26;--color-button:26,26,26;--color-button-text:246,244,239;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}
.color-scheme-2{--color-background:255,255,255;--color-foreground:26,26,26;--color-button:26,26,26;--color-button-text:255,255,255;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}
.color-scheme-3{--color-background:26,26,26;--color-foreground:255,255,255;--color-button:255,115,95;--color-button-text:255,255,255;--color-secondary-button-text:246,244,239;--color-shadow:26,26,26;}
.color-scheme-4{--color-background:231,226,216;--color-foreground:26,26,26;--color-button:26,26,26;--color-button-text:246,244,239;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}
.color-scheme-5{--color-background:244,237,228;--color-foreground:26,26,26;--color-button:26,26,26;--color-button-text:246,244,239;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}
.color-scheme-coral{--color-background:255,115,95;--color-foreground:255,255,255;--color-button:8,130,135;--color-button-text:246,244,239;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}

body,.color-scheme-1,.color-scheme-2,.color-scheme-3,.color-scheme-4,.color-scheme-5,.color-scheme-coral{
  color:rgb(var(--color-foreground));
  background-color:rgb(var(--color-background));
}
body{--color-background:255,255,255;--color-foreground:26,26,26;--color-button:26,26,26;--color-button-text:246,244,239;--color-secondary-button-text:26,26,26;--color-shadow:26,26,26;}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:62.5%;height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;min-height:100%;display:grid;
  /* An explicit column stops grid from sizing to the widest child's
     max-content, which would otherwise let a carousel track widen the page. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  font-family:var(--font-body-family);font-weight:var(--font-body-weight);
  font-size:1.5rem;line-height:1.6;letter-spacing:.06rem;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block;}
img{height:auto;}
button{cursor:pointer;font-family:inherit;border:0;background:none;}
a{color:inherit;}
ul,ol{padding:0;}
figure,li{margin:0;padding:0;}
li{list-style:none;}
table{border-collapse:collapse;width:100%;}
::selection{background:rgb(var(--jw-brass));color:#1a1a1a;}
.visually-hidden{position:absolute!important;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);word-wrap:normal!important;}
.skip-to-content-link:focus{z-index:9999;position:inherit;overflow:auto;width:auto;height:auto;clip:auto;}
summary{cursor:pointer;list-style:none;position:relative;}
summary::-webkit-details-marker{display:none;}

/* ==========================================================================
   Typography — Jawad Style layer
   ========================================================================== */
h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--font-heading-family);
  font-weight:500;letter-spacing:-0.02em;line-height:1.12;
  margin:0 0 1.5rem;word-break:break-word;
}
.h0{font-size:calc(4.0rem * var(--font-heading-scale));line-height:1.02;letter-spacing:-0.035em;}
h1,.h1{font-size:calc(2.8rem * var(--font-heading-scale));letter-spacing:-0.028em;}
h2,.h2{font-size:calc(2.2rem * var(--font-heading-scale));}
h3,.h3{font-size:calc(1.8rem * var(--font-heading-scale));}
h4,.h4{font-size:calc(1.5rem * var(--font-heading-scale));}
h5,.h5{font-size:calc(1.3rem * var(--font-heading-scale));}
@media screen and (min-width:750px){
  .h0{font-size:calc(5.2rem * var(--font-heading-scale));}
  h1,.h1{font-size:calc(3.0rem * var(--font-heading-scale));}
  h2,.h2{font-size:calc(2.4rem * var(--font-heading-scale));}
}
p{margin:0 0 1.2em;}
.rte,.rich-text__text,.multicolumn-card__info{line-height:1.75;}
.rte p{margin:0 0 1.2em;}
.rte a{text-decoration:underline;text-underline-offset:.3rem;}
.rte img{max-width:400px!important;width:100%!important;height:auto!important;display:block!important;margin:0!important;border-radius:16px;}
.rte ul,.rte ol{margin:0 0 1.2em;padding-left:2rem;}
.rte li{list-style:inherit;}
.rte ul li{list-style:disc;}
.caption{font-size:1.2rem;letter-spacing:.07rem;line-height:1.7;}
.subtitle{font-size:1.8rem;line-height:1.5;letter-spacing:.06rem;}

/* ==========================================================================
   Layout
   ========================================================================== */
.page-width{max-width:var(--page-width);margin:0 auto;padding:0 var(--page-gutter);}
.page-width--narrow{max-width:72rem;}
@media screen and (min-width:750px){
  :root{--page-gutter:5rem;}
  .page-width--narrow{padding:0 9rem;}
}
/* The section templates emit --section-pt / --section-pb on .bk-section.
   This rule used to target .section, which nothing uses, so every one of
   those sections rendered with no vertical padding at all. */
.section,
.bk-section{padding-top:var(--section-pt,0);padding-bottom:var(--section-pb,0);}
.isolate{position:relative;z-index:0;}
.grid{display:flex;flex-wrap:wrap;padding:0;list-style:none;
  column-gap:var(--grid-gap-h);row-gap:var(--grid-gap-v);margin:0;}
.grid__item{flex:0 0 auto;width:calc(25% - var(--grid-gap-h) * 3 / 4);max-width:100%;}
.grid--2-col .grid__item{width:calc(50% - var(--grid-gap-h) / 2);}
.grid--1-col .grid__item{width:100%;}
.grid--3-col .grid__item{width:calc(33.33% - var(--grid-gap-h) * 2 / 3);}
.grid--5-col .grid__item{width:calc(20% - var(--grid-gap-h) * 4 / 5);}
.grid--6-col .grid__item{width:calc(16.66% - var(--grid-gap-h) * 5 / 6);}
@media screen and (max-width:989px){
  .grid--6-col .grid__item,.grid--5-col .grid__item,.grid--4-col .grid__item{width:calc(33.33% - var(--grid-gap-h) * 2 / 3);}
}
@media screen and (max-width:749px){
  .grid__item,.grid--3-col .grid__item,.grid--4-col .grid__item,
  .grid--5-col .grid__item,.grid--6-col .grid__item{width:calc(50% - var(--grid-gap-h) / 2);}
  .grid--1-col-tablet-down .grid__item{width:100%;}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,.shopify-payment-button__button--unbranded,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .button{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body-family);
  text-transform:uppercase;letter-spacing:.16em;font-size:1.15rem;font-weight:500;
  padding:1.5rem 3rem;min-width:auto;text-decoration:none;text-align:center;
  border-radius:var(--buttons-radius);
  border:var(--buttons-border-width) solid rgba(var(--color-button),var(--buttons-border-opacity));
  background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));
  transition:background-color .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease;
  cursor:pointer;line-height:1.2;
}
.button:not([disabled]):hover,.woocommerce .button:not([disabled]):hover{transform:translateY(-2px);}
.button:after{box-shadow:none!important;}
.button--secondary,.woocommerce a.button.alt--secondary{
  background-color:transparent;color:rgb(var(--color-secondary-button-text));
  border-color:rgba(var(--color-secondary-button-text),var(--buttons-border-opacity));
}
.button--secondary:hover{background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));}
.button--full-width{width:100%;}
.button--small{padding:1.1rem 2rem;font-size:1.05rem;}
.button[disabled],.button[aria-disabled=true]{cursor:not-allowed;opacity:.5;transform:none;}
.link,.underlined-link{
  text-transform:uppercase;letter-spacing:.14em;font-size:1.2rem;
  text-underline-offset:.4rem;text-decoration:underline;
  background:none;border:none;color:inherit;display:inline-block;
}
.link--text{text-decoration:none;}

/* ==========================================================================
   Form fields
   ========================================================================== */
.field{position:relative;display:flex;width:100%;}
.field__input,.select__select,.customer input,.customer textarea,
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=number],input[type=url],textarea,select{
  font-family:var(--font-body-family);font-size:1.5rem;
  width:100%;padding:1.4rem 1.6rem;margin:0;
  background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));
  border-radius:var(--inputs-radius);
  border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));
  transition:border-color .2s ease,box-shadow .2s ease;appearance:none;
}
textarea{min-height:12rem;resize:vertical;}
.field__input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:rgb(var(--color-foreground));
  box-shadow:0 0 0 1px rgb(var(--color-foreground));
}
.field__label{font-size:1.4rem;margin-bottom:.6rem;display:block;opacity:.75;}
label{font-size:1.4rem;}
.quantity{position:relative;display:flex;align-items:center;
  border-radius:var(--inputs-radius);
  border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));
  width:calc(11rem / var(--font-body-scale));min-height:4.5rem;overflow:hidden;}
.quantity__input{flex-grow:1;text-align:center;border:0;padding:0;background:transparent;box-shadow:none;}
.quantity__input:focus{box-shadow:none;}
.quantity__button{flex:0 0 4rem;display:flex;align-items:center;justify-content:center;
  background:none;font-size:1.8rem;color:currentColor;padding:0;align-self:stretch;}

/* ==========================================================================
   Product / collection cards — radius 15px, media 16px, vertical-lift hover
   ========================================================================== */
.card-wrapper{display:block;position:relative;height:100%;text-decoration:none;color:inherit;}
.card{display:flex;flex-direction:column;position:relative;height:100%;
  border-radius:15px;text-align:left;background:rgb(var(--color-background));}
.card__media,.card .media,.card__media .media{
  border-top-left-radius:15px;border-top-right-radius:15px;overflow:hidden;}
.card__inner{position:relative;width:100%;}
.media{display:block;position:relative;overflow:hidden;background-color:rgba(var(--color-foreground),.04);}
.media--square{padding-bottom:100%;}
.media--portrait{padding-bottom:125%;}
.media--landscape{padding-bottom:75%;}
.media > img,.media > picture > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)!important;}
.card-wrapper:hover .media img,.collection-list:hover .media img{transform:scale(1.06);}
.card__content{display:flex;flex-direction:column;flex-grow:1;padding:0;}
.card__information{padding-top:1.2rem;padding-left:1.2rem;padding-right:1.2rem;padding-bottom:1.4rem;
  display:flex;flex-direction:column;flex-grow:1;}
.card__heading,.card__heading a{
  font-weight:500;letter-spacing:-0.01em;font-size:1.6rem;line-height:1.35;
  text-decoration:none;margin:0 0 .4rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em;}
.card__heading a:hover{text-decoration:underline;text-underline-offset:.3rem;}
.card-information{margin-top:auto;}
.price{font-size:1.5rem;letter-spacing:.01em;min-height:3em;
  display:flex;flex-direction:column;justify-content:center;}
.price__container{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;}
.price-item{margin:0;}
.price-item--regular{opacity:.7;text-decoration:line-through;font-size:1.3rem;}
.price--on-sale .price-item--sale{color:rgb(var(--jw-brass));font-weight:600;}
.price .unit-price{font-size:1.1rem;opacity:.7;}
.card__badge{position:absolute;bottom:1rem;left:1rem;z-index:2;display:flex;gap:.5rem;}
.badge{
  display:inline-block;text-transform:uppercase;letter-spacing:.1em;
  font-size:1.05rem;padding:.5rem 1rem;font-weight:500;
  border-radius:var(--badge-corner-radius);
  background:rgba(var(--color-foreground),.08);color:rgb(var(--color-foreground));
  border:1px solid transparent;}
.card__badge .badge{background:#c9a24b!important;color:#1a1a1a!important;border-color:#c9a24b!important;}
.badge--sold-out{background:#1a1a1a!important;color:#fff!important;border-color:#1a1a1a!important;}
.collection-list .card__heading{font-size:2rem;letter-spacing:.02em;text-transform:uppercase;}

/* vertical-lift hover (animations_hover_elements) */
.animate--hover-vertical-lift{transition:transform var(--duration-long) var(--ease-out-quad);}
.card-wrapper:hover .animate--hover-vertical-lift,
.bk-lift:hover{transform:translateY(-6px);}

/* reveal on scroll (animations_reveal_on_scroll)
   Only hidden when JS is running, and revealed by a transition rather than an
   animation fill, so content can never end up permanently invisible. */
.js .scroll-trigger{
  opacity:0;transform:translateY(2rem);
  transition:opacity .8s cubic-bezier(0,0,.3,1),transform .8s cubic-bezier(0,0,.3,1);}
.js .scroll-trigger.bk-animate--slide-in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .js .scroll-trigger{opacity:1!important;transform:none!important;transition:none!important;}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ==========================================================================
   Section title rows
   ========================================================================== */
.title-wrapper-with-link{display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;margin-bottom:3rem;flex-wrap:wrap;}
.title-wrapper-with-link .title,.collection .title,.rich-text__heading,.multicolumn .title{
  font-weight:500;letter-spacing:-0.018em;margin:0;}
.title--primary{margin:0;}
.rich-text__heading{font-size:clamp(2.6rem,3.2vw,4rem);}
.rich-text__text{font-size:1.7rem;}
.center{text-align:center;}
.rich-text__wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:88rem;margin:0 auto;}
.rich-text__wrapper > *{margin:0 0 1rem;}

/* ==========================================================================
   Utility
   ========================================================================== */
.hidden,[hidden]{display:none!important;}
.full-width{width:100%;}
.no-js:not(html){display:none!important;}
html.no-js .no-js:not(html){display:block!important;}
html.no-js .no-js-hidden{display:none!important;}
.bk-section{position:relative;min-width:0;}
.bk-main,.header-wrapper,.announcement-bar,.footer{min-width:0;max-width:100%;}
.small-hide{display:none;}
@media screen and (min-width:750px){.small-hide{display:block;}.medium-hide{display:none;}}
@media screen and (max-width:749px){.large-up-hide{display:block;}}
@media screen and (min-width:990px){.large-up-hide{display:none;}}
.placeholder-svg{width:100%;height:100%;background:rgba(var(--color-foreground),.04);
  fill:rgba(var(--color-foreground),.3);position:absolute;inset:0;}