/* ==========================================================================
   Bikaoo — styles for markup this theme adds on top of the ported sections:
   featured product, pack-offer option tag, widgets, small gaps.
   Written in the same language as sections.css (#151719 ink, coral, brass).
   ========================================================================== */

.bk-main{display:block;}

/* -------------------------------------------------- featured product ----- */
.bk-featured-product__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;}
@media screen and (max-width:989px){.bk-featured-product__grid{grid-template-columns:1fr;}}
.bk-featured-product__media{position:relative;border-radius:16px;overflow:hidden;}
.bk-featured-product__media img{width:100%;height:auto;border-radius:16px;}
.bk-featured-product__info{max-width:56rem;}
.bk-featured-product__title{margin:0 0 1.2rem;}
.bk-featured-product__title a{text-decoration:none;}
.bk-featured-product__title a:hover{text-decoration:underline;text-underline-offset:.4rem;}
.bk-featured-product .product-form__buttons{margin-top:2rem;}

/* ------------------------------------------- pack offer: option tagging -- */
.bikaoo-featured-pack-media{position:relative;overflow:visible!important;}
.bikaoo-pack-option-label{position:relative!important;overflow:visible!important;}
.bikaoo-pack-has-option{box-shadow:0 0 0 1px var(--bk-coral);}

/* ------------------------------------------------------ product extras --- */
.bk-product__rating{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.2rem;flex-wrap:wrap;}
.bk-product__rating .star-rating{font-size:1.3rem;color:var(--bk-brass);}
.bk-buy-now-form{margin:0;}
.product__meta{margin-top:2.4rem;padding-top:1.8rem;
  border-top:1px solid rgba(var(--color-foreground),.1);}
.product__meta p{margin:0 0 .4rem;}
.product__meta a{text-decoration:none;}
.product__meta a:hover{text-decoration:underline;text-underline-offset:.3rem;}

/* ------------------------------------------------------- card modifiers -- */
.card--standard,.card--media{background:transparent;}
.product-card-wrapper,.collection-card-wrapper{height:100%;}
.entry-summary,.summary{min-width:0;}

/* ------------------------------------------------------- predictive ------ */
.predictive-search__title{display:block;font-size:1.4rem;line-height:1.4;}
.predictive-search__price{display:block;font-size:1.25rem;opacity:.7;margin-top:.2rem;}

/* ------------------------------------------------------- drawer row ----- */
.menu-drawer__row{display:flex;align-items:center;justify-content:space-between;
  gap:.4rem;border-bottom:1px solid rgba(var(--color-foreground),.06);}
.menu-drawer__row .menu-drawer__menu-item{flex:1;border:0;}

/* ------------------------------------------------------- contact field -- */
.bikaoo-field--full{grid-column:1 / -1;}

/* ------------------------------------------------------- blog cards ----- */
.bk-article-card{display:flex;flex-direction:column;}
.bk-article-card .link{margin-top:auto;}

/* ------------------------------------------------------- widgets -------- */
.bk-sidebar{display:flex;flex-direction:column;gap:3rem;}
.bk-widget{border:1px solid rgba(var(--color-foreground),.12);border-radius:12px;padding:2rem;}
.bk-widget__title{font-size:1.25rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:500;margin:0 0 1.4rem;}
.bk-widget ul{display:flex;flex-direction:column;gap:.8rem;}
.bk-widget a{text-decoration:none;font-size:1.4rem;}
.bk-widget a:hover{text-decoration:underline;text-underline-offset:.3rem;}

/* ------------------------------------------- rich-text section wrapper -- */
.rich-text{display:block;}

/* -------------------------------------- WhatsApp button on product page - */
.bikaoo-whatsapp-wrap{margin:2rem 0 0;}

/* ------------------------------- variation select fallback (Woo native) - */
.variations{width:100%;border:0;margin:0 0 1.6rem;}
.variations tr{display:block;margin-bottom:1.4rem;}
.variations th,.variations td{display:block;padding:0;text-align:left;border:0;}
.variations .label label{text-transform:uppercase;letter-spacing:.14em;font-size:1.15rem;
  font-weight:500;margin-bottom:.8rem;display:block;}
.variations .value{position:relative;}
.bk-variation-select{width:100%;}
.reset_variations{display:inline-block;margin-top:.8rem;font-size:1.2rem;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:underline;
  text-underline-offset:.3rem;}
.woocommerce-variation-price{margin:1.4rem 0;}
.woocommerce-variation-price .price{min-height:auto;}
.woocommerce-variation-availability{margin-bottom:1rem;font-size:1.3rem;}
.single_variation_wrap .woocommerce-variation-add-to-cart{
  display:flex;flex-direction:column;gap:1rem;}

/* ---------------------------------------- variant pills (Woo selects) ---- */
.bk-variant__native{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}
.bk-variant__name{font-weight:500;}
.bk-variant__price{font-weight:600;}
fieldset.product-form__input--pill legend.form__label{padding:0;}

/* anchors styled as buttons inside sections must not pick up link underlines */
a.bikaoo-add-btn,a.bikaoo-spotlight-add,a.bikaoo-spotlight-view,
a.bikaoo-view-all,a.bikaoo-result-btn,a.bikaoo-pro-btn,a.bikaoo-pro-product-btn,
a.bikaoo-mobile-image-carousel__btn,a.bikaoo-spotlight-view-all{text-decoration:none;}

/* ---------------------------- variation rows: our legend replaces Woo's -- */
.variations tr:has(fieldset.product-form__input--pill) th.label{display:none;}
.variations tr:has(fieldset.product-form__input--pill) td.value{display:block;width:100%;}

/* variation price block */
.woocommerce-variation-price .price{min-height:auto;display:block;}
.woocommerce-variation-price del,
.bk-product__price del{text-decoration:line-through;opacity:.45;font-size:1.8rem;margin-right:1rem;}
.woocommerce-variation-price ins,
.bk-product__price ins{text-decoration:none;}
.woocommerce-variation-price .woocommerce-Price-amount{font-size:2.6rem;font-weight:500;}
.woocommerce-variation-price del .woocommerce-Price-amount{font-size:1.8rem;font-weight:400;}
.woocommerce-variation-description{font-size:1.4rem;opacity:.8;margin-bottom:1rem;}
.reset_variations{opacity:.65;}
.reset_variations:hover{opacity:1;}

/* quantity: give the number room to breathe */
.quantity{width:14rem;min-height:5rem;}
.quantity__button{flex:0 0 4.4rem;}
.quantity__input{min-width:0;width:100%;font-size:1.5rem;padding:0;}

/* quantity: beat the generic input[type=number] rule in base.css */
.quantity input[type=number].quantity__input,
.quantity input.qty,
.quantity .quantity__input{
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;padding:0 .4rem!important;text-align:center;
  height:auto;line-height:1.2;-moz-appearance:textfield;}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.quantity .quantity__input:focus{box-shadow:none!important;outline:none;}

/* ------------------------------- Woo <del>/<ins> price pairs ------------- */
.price ins,.price ins .woocommerce-Price-amount,
.woocommerce-Price-amount ins,ins.woocommerce-Price-amount{text-decoration:none;}
.price del,.price del .woocommerce-Price-amount{
  text-decoration:line-through;opacity:.5;font-weight:400;}
.price ins{font-weight:600;color:rgb(var(--jw-brass));}
.price .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

/* ==========================================================================
   Image-less states for the editorial sections.
   A banner, mobile hero slide or before/after card with no artwork yet
   renders as a branded panel, never a stretched product placeholder.
   ========================================================================== */

/* ---- banner slideshow ---- */
.slideshow__media--panel{
  position:relative;height:auto;min-height:0;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,115,95,.22) 0%, rgba(255,115,95,0) 58%),
    radial-gradient(120% 140% at 88% 100%, rgba(34,169,157,.20) 0%, rgba(34,169,157,0) 60%),
    linear-gradient(140deg,#17191b 0%,#151719 48%,#1f2225 100%);
  color:#fff;overflow:hidden;}
.slideshow__media--panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 80% at 50% 45%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 45%,#000 0%,transparent 78%);}
.slideshow__media--panel .slideshow__text-wrapper{
  position:static;inset:auto;
  padding:clamp(56px,9vw,112px) clamp(20px,5vw,64px) clamp(76px,10vw,128px);}
.slideshow__media--panel .slideshow__text{position:relative;z-index:2;max-width:76rem;}
.slideshow__media--panel .banner__heading{
  font-size:clamp(3.2rem,5.2vw,6.4rem)!important;color:#fff;}
.slideshow__media--panel .banner__text{color:rgba(255,255,255,.82);}
.slideshow__media--panel .button{
  background:#fff;color:#151719;border-color:#fff;}
.slideshow__media--panel .button:hover{background:var(--bk-coral);border-color:var(--bk-coral);color:#fff;}

/* the fixed banner heights only apply when there is artwork to crop */
.slideshow--no-media .slideshow__media,
.slideshow--large .slideshow__media--panel,
.slideshow--medium .slideshow__media--panel{height:auto;max-height:none;}

/* the dots sit inside the dark panel, so they have to read light */
.slideshow--no-media .slideshow__controls .slider-counter__link .dot{
  background:rgba(255,255,255,.34);}
.slideshow--no-media .slideshow__controls .slider-counter__link--active .dot{
  background:#fff;}

/* ---- mobile hero slide ---- */
.bikaoo-mobile-image-carousel__slide.is-panel{
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255,115,95,.26) 0%, rgba(255,115,95,0) 60%),
    linear-gradient(150deg,#17191b 0%,#151719 55%,#20242a 100%);}
.bikaoo-mobile-image-carousel__slide.is-panel .bikaoo-mobile-image-carousel__content{
  position:static;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;background:none;}

/* ---- before & after cards ---- */
.bikaoo-result-image.is-empty{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(23,25,27,.05) 0 10px, rgba(23,25,27,.02) 10px 20px),
    #f4efea;}
.bikaoo-result-image.is-empty::after{
  content:"";position:absolute;inset:0;
  border:1px dashed rgba(23,25,27,.16);border-radius:inherit;}

/* Mixed slideshow: if other slides carry artwork, a panel slide matches their
   height so the band does not jump as it rotates. */
.slideshow:not(.slideshow--no-media).slideshow--large .slideshow__media--panel{height:72rem;max-height:calc(100vh - 10rem);}
.slideshow:not(.slideshow--no-media).slideshow--medium .slideshow__media--panel{height:56rem;}
.slideshow:not(.slideshow--no-media) .slideshow__media--panel{
  display:flex;align-items:center;justify-content:center;}
.slideshow:not(.slideshow--no-media) .slideshow__media--panel .slideshow__text-wrapper{
  padding:clamp(32px,6vw,72px) clamp(20px,5vw,64px);}
@media screen and (max-width:749px){
  .slideshow:not(.slideshow--no-media).slideshow--large .slideshow__media--panel{height:48rem;}
  .slideshow:not(.slideshow--no-media).slideshow--medium .slideshow__media--panel{height:40rem;}
}