/** Shopify CDN: Minification failed

Line 237:7 Unexpected "\"Can't Decide? Compare These Styles\""

**/
/* ============================================================
   Waikiki Essentials — Theme Stylesheet
   Extracted verbatim from the original single-page store and
   preserved exactly to keep the design, layout, animations,
   and responsive behavior identical inside Shopify.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff;color:#1a1a1a;font-size:14px}
.ann-bar{background:#111;color:#fff;text-align:center;font-size:18px;padding:10px;font-weight:600;letter-spacing:.05em}
nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px;border-bottom:1px solid #e5e5e5;background:#fff;position:sticky;top:0;z-index:30}
.logo-wrap{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;color:inherit}
.logo-circle{width:44px;height:44px;border:2px solid #222;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:900;color:#222;text-align:center;line-height:1.2;letter-spacing:.03em;flex-shrink:0}
.brand-name{font-size:15px;font-weight:800;color:#fff !important;letter-spacing:.1em;text-transform:uppercase}
.brand-name em{color:#f28b22 !important;font-style:normal}
.nav-links{display:flex;gap:24px;flex:1;justify-content:center}
.nav-links a{font-size:12.5px;font-weight:500;color:#222;text-decoration:none;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.nav-links a.red{color:#2fa8a0;font-weight:700}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-right i{font-size:20px;color:#222;cursor:pointer;transition:color .18s}
.nav-right i:hover{color:#2fa8a0}
.nav-right i.ti-user{color:#2fa8a0}
.nav-right i.ti-user:hover{color:#1a3c4e}
.nav-left{display:none;align-items:center;gap:14px;flex-shrink:0}
.nav-left i{font-size:20px;color:#222;cursor:pointer;transition:color .18s}
.nav-left i:hover{color:#2fa8a0}
.nav-menu-extra{display:none}
.nav-deals-mobile{display:none;align-items:center;cursor:pointer;text-decoration:none;position:relative}
.country-pill{border:1px solid #ddd;border-radius:4px;padding:5px 10px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.country-pill .us-flag{width:21px;height:14px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.country-pill .pill-chev{font-size:11px;color:#888;margin-left:1px}
.cart-trigger{position:relative;cursor:pointer}
.cart-count-badge{position:absolute;top:-6px;right:-7px;background:#111;color:#fff;font-size:8px;font-weight:800;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center}
/* MAIN LAYOUT */
.product-area{display:flex;gap:0;align-items:flex-start;max-width:1260px;margin:0 auto;width:100%}
.left-col{flex:1;padding:0 20px 0 32px;min-width:0}
.right-col{width:420px;flex-shrink:0;position:sticky;top:64px;height:fit-content;max-height:calc(100vh - 64px);overflow-y:auto;padding:20px 32px 28px 20px;border-left:1px solid #f0f0f0;scrollbar-width:none;-ms-overflow-style:none}
.right-col::-webkit-scrollbar{display:none;width:0;height:0}
/* IMAGE ROWS */
.dual-img{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.img-panel{overflow:hidden;position:relative}
.img-panel img{width:100%;height:100%;object-fit:cover;display:block}
.img-left{height:420px}.img-right{height:420px}
.row-full{margin-bottom:10px;overflow:hidden}
.row-full img{width:100%;display:block}
.row-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.row-two .panel{overflow:hidden;height:420px}
.row-two .panel img{width:100%;height:100%;object-fit:cover;display:block}
/* RIGHT COL */
.prod-title{font-size:28px;font-weight:400;color:#111;margin-bottom:16px;font-family:'Georgia',serif;line-height:1.2;text-align:center}
.pa-mobile-head{display:none}
.stars-row{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.stars{color:#f5a623;font-size:14px;letter-spacing:1px}
.star-num{font-size:13px;font-weight:600;color:#333}
.rev-link{font-size:13px;color:#555;text-decoration:underline;cursor:pointer}
.style-price-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.style-lbl{font-size:13px;color:#555}
.style-lbl b{color:#111;font-weight:600}
.price-num{font-size:22px;font-weight:700;color:#111}
.price-num .was{font-size:16px;color:#aaa;text-decoration:line-through;font-weight:400;margin-right:8px}
.price-num .now{color:#c0392b}
.swatches{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:20px}
.sw{flex:0 0 calc((100% - 48px) / 6);height:auto;aspect-ratio:1;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.sw:hover{transform:scale(1.08)}
.sw.active{border:2px solid #222;box-shadow:0 0 0 2px #fff inset}
.sw1{background:radial-gradient(circle,#5ab8b3,#2e9991)}.sw2{background:conic-gradient(#888 0 25%,#555 25% 50%,#888 50% 75%,#555 75%)}.sw3{background:radial-gradient(circle,#7080b8,#4050a0)}.sw4{background:radial-gradient(circle,#e89080,#d07060)}.sw5{background:conic-gradient(#c8b498 0 50%,#a89478 50%)}.sw6{background:radial-gradient(circle,#b0a0c8,#9080b0)}.sw7{background:radial-gradient(circle,#b84040,#882828)}.sw8{background:radial-gradient(circle,#d0d860,#a0b030)}.sw9{background:radial-gradient(circle,#e0a0a8,#c07880)}.sw10{background:radial-gradient(circle,#708860,#506040)}.sw11{background:radial-gradient(circle,#d8c0a8,#b8a080)}.sw12{background:radial-gradient(circle,#8898a8,#607080)}.sw13{background:radial-gradient(circle,#f0d060,#d0b030)}.sw14{background:linear-gradient(135deg,#f0d060 50%,#1a3c4e 50%)}.sw15{background:radial-gradient(circle,#88d8c8,#58b8a8)}.sw16{background:radial-gradient(circle,#b8b8c0,#909098)}.sw17{background:radial-gradient(circle,#e8c060,#c8a038)}.sw18{background:radial-gradient(circle,#b8c4d8,#8898b8)}.sw19{background:conic-gradient(#e05b4b 0 20%,#f5a623 20% 40%,#5ab8b3 40% 60%,#7080b8 60% 80%,#e05b4b 80%)}.sw20{background:radial-gradient(circle,#f4f2ee,#e0ddd8);border:1px solid #ccc}.sw21{background:radial-gradient(circle,#e8a8a8,#c87888)}
.add-btn{width:100%;background:#111;color:#fff;border:none;padding:16px;border-radius:4px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-bottom:12px;transition:background .2s}
.add-btn:hover{background:#333}
.add-btn:disabled{background:#999;cursor:not-allowed}
.shoppay-line{display:flex;align-items:center;gap:8px;font-size:12px;color:#555;margin-bottom:18px;flex-wrap:wrap}
.sp-logo{background:#5a31f4;color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:3px;letter-spacing:.04em}
.sp-affirm{font-size:9px;color:#888}
.see-action-lbl{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#111;margin-bottom:9px}
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
.ag-cell{border-radius:6px;aspect-ratio:3/4;position:relative;overflow:hidden;cursor:pointer;background:#000}
.ag-cell video{width:100%;height:100%;object-fit:cover;display:block}
.ag-play{position:absolute;bottom:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;pointer-events:none}
.vid-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.vid-lightbox.open{display:flex}
.vid-lightbox video{max-width:min(92vw,520px);max-height:88vh;border-radius:10px;background:#000}
.vid-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}
.divider{height:1px;background:#f0f0f0;margin:14px 0}
.pdp-care-link{display:none}
.badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px}
.badge-cell{text-align:center;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:6px}
.badge-cell svg{width:38px;height:38px}
.bc-lbl{font-size:9px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:.04em;line-height:1.5;text-align:center}
.accordion{border-top:1px solid #e0e0e0}
.acc-item{margin-left: 10px; border-bottom:1px solid #e0e0e0;}
.acc-header{display:flex;justify-content:space-between;align-items:center;padding:13px 0;cursor:pointer;user-select:none}
.acc-header-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#111}
.acc-chevron{font-size:16px;color:#555;transition:transform .2s;line-height:1}
.acc-body{display:none;padding-bottom:14px}
.acc-body.open{display:block}
.acc-chevron.open{transform:rotate(180deg)}
.acc-list{list-style:none;padding:0;margin:0}
.acc-list li{font-size:12.5px;color:#444;line-height:1.7;padding:2px 0 2px 14px;position:relative}
.acc-list li::before{content:"•";position:absolute;left:0;color:#2fa8a0}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #e8e8e8;border-radius:6px;overflow:hidden;margin-top:14px}
.tg-cell{padding:10px 12px;display:flex;align-items:center;gap:8px;border-right:1px solid #e8e8e8}
.tg-cell:last-child{border-right:none}
.tg-icon{font-size:16px;display:flex;align-items:center;flex-shrink:0}
.tg-icon i{font-size:21px;color:#2fa8a0;line-height:1}
.tg-text b{display:block;font-size:9.5px;font-weight:800;color:#111;text-transform:uppercase;letter-spacing:.04em}
.tg-text span{font-size:9.5px;color:#2fa8a0}
.get-popup{position:fixed;bottom:20px;left:16px;background:#111;color:#fff;padding:10px 16px;border-radius:8px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:12px;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.get-popup .x-btn{cursor:pointer;opacity:.6;font-size:15px}
.prod-desc{font-size:13px;color:#444;line-height:1.75;margin-bottom:14px;margin-top:0}
.prod-desc>*:first-child{margin-top:14px}
/* Product description — 30px gap below the text on ALL devices
   (desktop, tablet, mobile). No media query = applies at every width.
   !important guarantees it wins over the base .prod-desc rule. */
.prod-desc{margin-bottom:30px !important}
/* CART */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .3s;z-index:620}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:430px;max-width:100%;background:#fff;z-index:630;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.25,.8,.3,1);box-shadow:-6px 0 28px rgba(0,0,0,.18)}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:grid;grid-template-columns:32px 1fr auto;align-items:center;padding:20px 22px;border-bottom:1px solid #eee}
.cart-back{font-size:22px;color:#222;cursor:pointer;line-height:1}
.cart-head-title{text-align:center;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#111}
.cart-head-count{display:flex;align-items:center;gap:5px;font-size:14px;color:#222}
.cart-head-count i{font-size:18px}
.cart-body{flex:1;overflow-y:auto;padding:8px 22px}
.cart-empty{text-align:center;color:#999;font-size:13px;padding:60px 10px;line-height:1.7}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:20px 0;border-bottom:1px solid #f0f0f0;align-items:start}
.ci-thumb{width:72px;height:72px;border-radius:6px;overflow:hidden}
.ci-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ci-name{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#111;line-height:1.3;margin-bottom:14px}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:5px;overflow:hidden}
.qty-stepper button{width:30px;height:30px;background:#fff;border:none;font-size:17px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-stepper button:hover{background:#f5f5f5}
.qty-val{min-width:30px;text-align:center;font-size:13px;font-weight:600;color:#111}
.ci-remove{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#999;text-decoration:underline;cursor:pointer;margin-left:14px}
.ci-remove:hover{color:#c0392b}
.ci-price{text-align:right;font-size:14px;font-weight:600;color:#111;white-space:nowrap}
.collection-sec{padding:18px 0 6px}
.collection-title{font-size:14px;color:#111;margin-bottom:14px}
.collection-card{display:grid;grid-template-columns:30px 64px 1fr 30px;align-items:center;gap:12px}
.coll-arrow{width:30px;height:30px;border:1px solid #e0e0e0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#555;cursor:pointer;background:#fff}
.coll-arrow:hover{background:#f5f5f5}
.coll-thumb{width:64px;height:64px;border-radius:6px;overflow:hidden}
.coll-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.coll-info{display:flex;flex-direction:column;gap:8px}
.coll-name{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#111}
.coll-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coll-add{background:#fff;border:1px solid #222;border-radius:4px;padding:8px 18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:#111}
.coll-add:hover{background:#111;color:#fff}
.coll-price{font-size:14px;font-weight:600;color:#111}
.cart-foot{border-top:1px solid #eee;padding:18px 22px 14px}
.cart-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cart-total-lbl{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#111}
.cart-total-val{font-size:18px;font-weight:700;color:#111}
.checkout-btn{width:100%;background:#111;color:#fff;border:none;padding:17px;border-radius:4px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.checkout-btn:hover{background:#333}
.cart-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#e8f6f4;padding:18px 22px}
.ct-cell{text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.ct-cell i{font-size:22px;color:#1a3c4e}
.ct-cell span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1a3c4e;line-height:1.4}
/* BELOW FOLD */
.below-fold{padding:48px 32px;max-width:1260px;margin:0 auto}
.bf-heading{font-size:22px;font-weight:700;color:#111;text-align:center;margin-bottom:6px}
.bf-sub{text-align:center;font-size:13px;color:#888;margin-bottom:28px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rc{border:1px solid #e8e8e8;border-radius:8px;padding:18px}
.rc-stars{color:#f5a623;font-size:13px;margin-bottom:5px}
.rc-title{font-size:13px;font-weight:700;color:#111;margin-bottom:6px}
.rc-body{font-size:12.5px;color:#555;line-height:1.6;margin-bottom:8px}
.rc-meta{font-size:11px;color:#999}
.rc-ver{color:#2fa8a0}
.also-section{padding:0 32px 50px;background:#fff}
.also-inner{max-width:1680px;margin:0 auto}
.also-section .bf-heading{font-size:30px;font-weight:700;letter-spacing:.01em;margin-bottom:28px;color:#20242a;text-align:center}
.also-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ac{background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;transition:transform .2s}
.ac:hover{transform:translateY(-3px)}
.ac-img{position:relative;aspect-ratio:4/5;height:auto;background:#f4f4f2;border-radius:12px;overflow:hidden;display:block;border-bottom:none}
.ac-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ac-img .ac-main-img{transition:opacity .3s ease}
.ac-img .ac-hover-img{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity .3s ease}

/* ============================================================
   STYLE CARD PROMO BADGES
   Match the "Can't Decide? Compare These Styles" reference:
   compact rounded pills inside the top-left of the image.
   ============================================================ */
.also-grid .ac .ac-badges-stack,
.ac .ac-badges-stack{
  position:absolute;
  top:12px;
  left:12px;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  pointer-events:none;
}
.also-grid .ac .ac-badge,
.ac .ac-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:24px;
  box-sizing:border-box;
  padding:4px 10px;
  border:0;
  border-radius:6px;
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:none;
}
.also-grid .ac .ac-badge.promo,
.ac .ac-badge.promo{
  background:#ed4b4b;
}
.also-grid .ac .ac-badge.trending,
.ac .ac-badge.trending{
  background:#ff4f16;
}
.also-grid .ac .ac-badge.new,
.ac .ac-badge.new{
  background:#123f59;
}

 MOBILE — EQUAL-SIZE STYLE CARDS
   All "Can't Decide? Compare These Styles" cards
   use the exact same image/card height.
@media (max-width: 767px) {
  .also-grid .ac {
    flex: 0 0 238px !important;
    width: 238px !important;
  }

  .also-grid .ac-img {
    width: 238px !important;
    height: 298px !important;
    min-height: 298px !important;
    max-height: 298px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  .also-grid .ac-img img,
  .also-grid .ac-track img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .also-grid .ac-info {
    min-height: 170px !important;
  }
}

@media (max-width: 380px) {
  .also-grid .ac {
    flex-basis: 226px !important;
    width: 226px !important;
  }

  .also-grid .ac-img {
    width: 226px !important;
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
  }
}
.ac-style-desc{
    margin:8px 0 14px;
    font-size:13px;
    line-height:1.45;
    color:#666;
    min-height:38px;
}
.ac-price{font-size:15px;font-weight:700;color:#20242a;margin-bottom:13px}
.ac-stars{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.ac-stars .st{color:#ff7276;font-size:14px;letter-spacing:1px;line-height:1}
.ac-stars .ct{font-size:12px;color:#666;line-height:1}
.ac-add-btn{width:100%;background:#20242a;color:#fff;border:none;border-radius:6px;padding:13px 12px;margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.ac-img-track{display:contents}
.ac-img-dots{display:none}
.footer-sms{background:#1a3c4e;text-align:center;padding:40px 32px;color:#fff}
.fs-title{font-size:17px;font-weight:800;margin-bottom:8px}
.fs-sub{font-size:12.5px;color:#a8dce8;margin-bottom:18px}
.fs-form{display:flex;gap:8px;justify-content:center;max-width:340px;margin:0 auto}
.fs-input{flex:1;padding:10px 13px;border-radius:5px;border:none;font-size:13px}
.fs-btn{background:#2fa8a0;color:#fff;border:none;padding:10px 18px;border-radius:5px;font-size:13px;font-weight:800;cursor:pointer}
.footer-main{background:#0d2535;padding:32px}
.fc-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1260px;margin:0 auto 24px}
.fc-col h4{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#a8dce8;margin-bottom:10px;display:flex;justify-content:space-between}
.fc-col a{display:block;font-size:11.5px;color:#607a88;margin-bottom:6px;text-decoration:none}
.fc-col a:hover{color:#fff}
.footer-bot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1a3c4e;padding-top:16px;max-width:1260px;margin:0 auto;flex-wrap:wrap;gap:10px}
.fb-logo{font-size:14px;font-weight:800;color:#7ecfca}
.fb-logo em{color:#e8934a;font-style:normal}
.fb-copy{font-size:10.5px;color:#456d7a}
.fb-soc{display:flex;gap:12px}
.fb-soc i{font-size:18px;color:#456d7a;cursor:pointer}
.fb-soc i:hover{color:#7ecfca}
/* CHECKOUT */
.checkout-screen{position:fixed;inset:0;background:#fff;z-index:400;overflow-y:auto;display:none}
.checkout-screen.open{display:block}
.co-topbar{border-bottom:1px solid #eee;padding:16px 32px;display:flex;align-items:center;gap:14px;position:sticky;top:0;background:#fff;z-index:5}
.co-back{font-size:22px;color:#222;cursor:pointer;line-height:1}
.co-logo{display:flex;align-items:center;gap:10px}
.co-logo .logo-circle{width:36px;height:36px;font-size:6px}
.co-logo .brand-name{font-size:13px}
.co-wrap{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:0 auto;min-height:calc(100vh - 70px)}
.co-left{padding:38px 56px 60px;border-right:1px solid #eee}
.co-right{padding:38px 48px 60px;background:#fafafa}
.co-h{font-size:21px;font-weight:700;color:#111;margin-bottom:4px}
.co-sub{font-size:13px;color:#777;margin-bottom:18px}
.pay-box{border:1px solid #4ab5ad;border-radius:8px;overflow:hidden;margin-bottom:18px}
.pay-method{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:#eefcfa;border-bottom:1px solid #d8eeec}
.pm-left{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:#222}
.pm-radio{width:17px;height:17px;border-radius:50%;border:1px solid #bbb;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-radio.on{border-color:#111}
.pm-radio.on::after{content:"";width:9px;height:9px;border-radius:50%;background:#111}
.card-chips{display:flex;gap:5px;align-items:center}
.card-chip{height:22px;width:34px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff}
.chip-visa{background:#1a1f71}.chip-mc{background:#eb001b}.chip-amex{background:#2e77bc}.chip-more{background:#222;font-size:9px}
.pay-fields{padding:16px}
.cof{position:relative;margin-bottom:11px}
.cof input{width:100%;padding:14px;border:1px solid #ddd;border-radius:6px;font-size:13px;color:#333;background:#fff}
.cof input:focus{outline:none;border-color:#4ab5ad}
.cof .f-ico{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#bbb;font-size:16px}
.cof-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.billing-check{display:flex;align-items:center;gap:9px;margin-top:4px;font-size:13px;color:#333}
.billing-check input{width:16px;height:16px;accent-color:#4ab5ad}
.alt-method{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border:1px solid #e2e2e2;border-top:none}
.am-left{display:flex;align-items:center;gap:11px;font-size:14px;color:#222}
.am-left b{font-weight:600}
.am-sub{font-size:13px;color:#777;font-weight:400}
.shop-mark{color:#5a31f4;font-weight:800;font-size:15px;letter-spacing:-.02em}
.pp-mark{font-weight:800;font-size:14px;color:#003087}.pp-mark span{color:#009cde}
.ap-mark{background:#b2fce4;color:#000;border-radius:5px;padding:4px 9px;font-size:11px;font-weight:800}
.save-sec{margin-top:24px}
.save-title{font-size:15px;font-weight:600;color:#111;display:flex;justify-content:space-between;align-items:center}
.save-not-now{color:#e0796b;font-size:13px;font-weight:600;cursor:pointer}
.save-fine{font-size:12px;color:#888;line-height:1.6;margin-top:6px}
.save-fine a{color:#444;text-decoration:underline}
.agree-line{font-size:13px;color:#555;line-height:1.6;margin:22px 0 18px}
.agree-line a{color:#e0796b;text-decoration:underline}
.pay-now-btn{width:100%;background:#93cfbd;color:#0f3a30;border:none;padding:18px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}
.pay-now-btn:hover{background:#7ec3ae}
.os-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;margin-bottom:20px}
.os-thumb{position:relative;width:64px;height:64px}
.os-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid #e5e5e5;display:block}
.os-qty-badge{position:absolute;top:-8px;right:-8px;background:#555;color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 5px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.os-name{font-size:14px;font-weight:600;color:#111;line-height:1.3}
.os-disc{font-size:12px;color:#c0392b;margin-top:3px}
.os-price{font-size:14px;font-weight:600;color:#111;white-space:nowrap}
.os-price .strike{color:#aaa;text-decoration:line-through;font-weight:400;display:block;font-size:12px;text-align:right}
.disc-row{display:flex;gap:10px;margin:18px 0 22px}
.disc-row input{flex:1;padding:14px;border:1px solid #ddd;border-radius:8px;font-size:13px}
.disc-row input:focus{outline:none;border-color:#4ab5ad}
.disc-apply{background:#eaeaea;color:#555;border:none;border-radius:8px;padding:0 22px;font-size:14px;font-weight:600;cursor:pointer}
.disc-apply:hover{background:#dcdcdc}
.disc-msg{font-size:12px;margin:-12px 0 18px}
.disc-msg.ok{color:#1f8a5a}.disc-msg.err{color:#c0392b}
.sum-line{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:#333;padding:6px 0}
.sum-line .muted{color:#888}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #e5e5e5;margin-top:10px;padding-top:16px}
.sum-total .t-lbl{font-size:18px;font-weight:700;color:#111}
.sum-total .t-val{font-size:21px;font-weight:700;color:#111}
.sum-total .t-cur{font-size:12px;color:#888;margin-right:6px;font-weight:500}
.rev-head{display:flex;align-items:center;gap:10px;margin:34px 0 18px}
.rev-head .rh-stars{color:#e0796b;font-size:15px;letter-spacing:1px}
.rev-head .rh-txt{font-size:16px;font-weight:700;color:#111}
.co-rev{display:flex;gap:14px;border:1px solid #eee;border-radius:10px;padding:16px;margin-bottom:14px;background:#fff}
.co-rev-img{width:96px;height:96px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:40px}
.co-rev-body .crb-stars{color:#e0796b;font-size:13px;letter-spacing:1px;margin-bottom:5px}
.co-rev-body .crb-title{font-size:14px;font-weight:700;color:#111;margin-bottom:6px}
.co-rev-body .crb-text{font-size:13px;color:#555;line-height:1.5;margin-bottom:8px}
.co-rev-body .crb-author{font-size:13px;color:#333;font-weight:600}
/* CUSTOMER CARE */
.care-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:500}
.care-overlay.open{opacity:1;visibility:visible}
.care-screen{position:fixed;inset:0;background:#f5f0e8;z-index:510;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .38s cubic-bezier(.25,.8,.3,1);overflow-y:auto}
.care-screen.open{transform:translateY(0)}
.care-topbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:18px 32px;border-bottom:1px solid rgba(0,0,0,.08);background:#f5f0e8;position:sticky;top:0;z-index:5}
.care-back{font-size:26px;color:#1a3c4e;cursor:pointer;line-height:1;user-select:none;width:40px;text-align:left}
.care-back:hover{color:#2fa8a0}
.care-top-logo{display:flex;align-items:center;gap:10px;justify-content:center}
.care-top-logo .brand-name{color:#1a3c4e !important}
.care-body{display:grid;grid-template-columns:1fr 400px;gap:60px;max-width:1100px;margin:0 auto;width:100%;padding:48px 32px 60px;flex:1}
.care-eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#2fa8a0;margin-bottom:14px}
.care-heading{font-family:'Georgia',serif;font-size:40px;font-weight:400;color:#1a3c4e;line-height:1.15;margin-bottom:14px}
.care-em{color:#2fa8a0;font-style:italic}
.care-sub{font-size:14px;color:#555;line-height:1.7;margin-bottom:28px;max-width:460px}
.care-form-wrap{background:#fff;border-radius:10px;padding:28px 28px 24px;border:1px solid rgba(0,0,0,.07);box-shadow:0 2px 14px rgba(0,0,0,.04)}
.care-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.care-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.care-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1a3c4e}
.req{color:#c0392b}.opt{color:#aaa;font-size:9.5px;text-transform:none;letter-spacing:0;font-weight:400}
.care-input{padding:13px 14px;border:1px solid #dde0e3;border-radius:7px;font-size:13.5px;color:#333;background:#fafaf9;font-family:inherit;transition:border-color .2s,box-shadow .2s;width:100%}
.care-input:focus{outline:none;border-color:#2fa8a0;box-shadow:0 0 0 3px rgba(47,168,160,.13)}
.care-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.care-textarea{min-height:120px;resize:vertical;font-family:inherit}
.care-fine{font-size:11.5px;color:#888;line-height:1.6;margin:14px 0 18px}
.care-fine a{color:#1a3c4e;text-decoration:underline}
.care-send-btn{display:inline-flex;align-items:center;gap:8px;background:#1a3c4e;color:#fff;border:none;padding:16px 32px;border-radius:7px;font-size:13px;font-weight:800;letter-spacing:.1em;cursor:pointer;transition:background .2s}
.care-send-btn:hover{background:#2fa8a0}
.care-right{padding-top:4px}
.care-badge-pill{display:inline-flex;align-items:center;gap:8px;background:#d8f0ec;border-radius:99px;padding:8px 16px;font-size:12.5px;font-weight:600;color:#1a3c4e;margin-bottom:28px}
.care-dot{width:9px;height:9px;border-radius:50%;background:#2fa8a0;flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.care-info-block{margin-bottom:4px}
.care-info-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#2fa8a0;margin-bottom:8px}
.care-info-heading{font-family:'Georgia',serif;font-size:22px;font-weight:400;color:#1a3c4e;margin-bottom:8px;line-height:1.2}
.care-info-body{font-size:13.5px;color:#666;line-height:1.65;margin-bottom:12px}
.care-info-link{font-size:13px;font-weight:700;color:#1a3c4e;text-decoration:underline;text-underline-offset:3px}
.care-info-link:hover{color:#2fa8a0}
.care-divider{height:1px;background:rgba(0,0,0,.1);margin:24px 0}
.care-footer-copy{text-align:center;font-size:12px;color:#888;padding:16px 32px 24px;border-top:1px solid rgba(0,0,0,.07)}
.care-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#1a3c4e;color:#fff;padding:14px 28px;border-radius:8px;font-size:13px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.22);z-index:600;transition:transform .35s cubic-bezier(.25,.8,.3,1),opacity .35s;opacity:0;white-space:nowrap}
.care-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* PRIVACY POLICY SCREEN */
.pp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:500}
.pp-overlay.open{opacity:1;visibility:visible}
.pp-screen{position:fixed;inset:0;background:#f5f0e8;z-index:510;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .38s cubic-bezier(.25,.8,.3,1);overflow-y:auto}
.pp-screen.open{transform:translateY(0)}
.pp-topbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:18px 32px;border-bottom:1px solid rgba(0,0,0,.08);background:#f5f0e8;position:sticky;top:0;z-index:5}
.pp-back{font-size:26px;color:#1a3c4e;cursor:pointer;line-height:1;user-select:none;width:40px;text-align:left}
.pp-back:hover{color:#2fa8a0}
.pp-top-logo{display:flex;align-items:center;gap:10px;justify-content:center}
.pp-hero{max-width:820px;margin:0 auto;width:100%;padding:48px 32px 8px;text-align:center}
.pp-eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#2fa8a0;margin-bottom:14px}
.pp-heading{font-family:'Georgia',serif;font-size:40px;font-weight:400;color:#1a3c4e;line-height:1.15;margin-bottom:12px}
.pp-em{color:#2fa8a0;font-style:italic}
.pp-updated{font-size:12.5px;color:#888;margin-bottom:8px}
.pp-body{max-width:820px;margin:0 auto;width:100%;padding:24px 32px 64px;flex:1}
.pp-card{background:#fff;border-radius:12px;padding:40px 44px;border:1px solid rgba(0,0,0,.07);box-shadow:0 2px 18px rgba(0,0,0,.05)}
.pp-intro{font-size:14.5px;color:#444;line-height:1.8;margin-bottom:8px}
.pp-sec{margin-top:30px}
.pp-sec:first-of-type{margin-top:0}
.pp-sec h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1a3c4e;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.pp-sec h3 .pp-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e8f6f4;color:#2fa8a0;font-size:12px;flex-shrink:0}
.pp-sec p{font-size:13.5px;color:#555;line-height:1.8;margin-bottom:10px}
.pp-sec ul{list-style:none;padding:0;margin:6px 0 10px}
.pp-sec li{font-size:13.5px;color:#555;line-height:1.7;padding:4px 0 4px 20px;position:relative}
.pp-sec li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:#2fa8a0}
.pp-sec a{color:#1a3c4e;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pp-sec a:hover{color:#2fa8a0}
.pp-divider{height:1px;background:rgba(0,0,0,.08);margin:30px 0}
.pp-contact-box{background:#e8f6f4;border-radius:10px;padding:22px 24px;margin-top:8px}
.pp-contact-box h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1a3c4e;margin-bottom:8px}
.pp-contact-box p{font-size:13.5px;color:#456d7a;line-height:1.7;margin:0}
.pp-contact-box a{color:#1a3c4e;font-weight:700;text-decoration:underline;cursor:pointer}
.pp-care-btn{display:inline-flex;align-items:center;gap:8px;background:#1a3c4e;color:#fff;border:none;padding:14px 28px;border-radius:7px;font-size:12.5px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:background .2s;margin-top:14px}
.pp-care-btn:hover{background:#2fa8a0}
.pp-footer-copy{text-align:center;font-size:12px;color:#888;padding:18px 32px 26px;border-top:1px solid rgba(0,0,0,.07)}
@media(max-width:760px){
  .pp-topbar{padding:14px 18px}
  .pp-hero{padding:32px 20px 4px}
  .pp-heading{font-size:30px}
  .pp-body{padding:20px 16px 48px}
  .pp-card{padding:26px 22px}
}
/* SIGN IN / SIGN UP SCREEN */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:500}
.auth-overlay.open{opacity:1;visibility:visible}
.auth-screen{position:fixed;inset:0;background:#fff;z-index:510;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .38s cubic-bezier(.25,.8,.3,1);overflow-y:auto}
.auth-screen.open{transform:translateY(0)}
.auth-topbar{border-bottom:1px solid #eee;padding:16px 32px;display:flex;align-items:center;justify-content:center;position:sticky;top:0;background:#fff;z-index:5;position:relative}
.auth-close-btn{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#f4f4f4;border:none;font-size:18px;color:#555;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s}
.auth-close-btn:hover{background:#e8e8e8;color:#111}
.auth-top-logo{display:flex;align-items:center;gap:10px}
.auth-top-logo .brand-name{color:#1a3c4e !important}
.auth-welcome{text-align:center;padding:36px 32px 28px;font-size:28px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#111}
.auth-tabs{display:none;justify-content:center;gap:0;border-bottom:2px solid #eee;margin:0 24px 28px}
.auth-tab{flex:1;padding:12px;text-align:center;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#888;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}
.auth-tab.active{color:#1a3c4e;border-bottom-color:#2fa8a0}
.auth-panels{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1060px;margin:0 auto;width:100%;padding:0 32px 60px;flex:1}
.auth-panel{padding:0 40px 0 0}
.auth-panel:last-child{padding:0 0 0 40px;border-left:1px solid #eee}
.auth-panel-title{text-align:center;font-size:17px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#111;margin-bottom:24px}
.af{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.af label{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1a3c4e}
.af input{padding:14px 14px;border:1px solid #dde0e3;border-radius:0;font-size:14px;color:#333;background:#fff;font-family:inherit;transition:border-color .2s}
.af input:focus{outline:none;border-color:#1a3c4e}
.af input[type=password]{letter-spacing:.2em;font-size:16px}
.af input[type=password]::placeholder{letter-spacing:.05em;font-size:14px}
.auth-submit{width:100%;background:#111;color:#fff;border:none;padding:16px;margin-top:8px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.auth-submit:hover{background:#2fa8a0}
.auth-forgot{display:block;text-align:center;font-size:13px;font-weight:700;color:#111;text-decoration:underline;text-underline-offset:3px;margin-top:14px;cursor:pointer}
.auth-forgot:hover{color:#2fa8a0}
.auth-divider-or{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:12px;color:#bbb}
.auth-divider-or::before,.auth-divider-or::after{content:"";flex:1;height:1px;background:#eee}
.auth-social{display:flex;flex-direction:column;gap:10px}
.auth-social-btn{width:100%;padding:13px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:600;color:#333;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.auth-social-btn:hover{border-color:#2fa8a0;box-shadow:0 0 0 2px rgba(47,168,160,.1)}
.auth-social-btn .s-icon{font-size:18px}
.auth-terms{font-size:11px;color:#aaa;line-height:1.65;margin-top:16px;text-align:center}
.auth-terms a{color:#777;text-decoration:underline}
.auth-success{display:none;text-align:center;padding:40px 20px}
.auth-success-icon{font-size:52px;margin-bottom:16px}
.auth-success h3{font-size:20px;font-weight:700;color:#1a3c4e;margin-bottom:8px}
.auth-success p{font-size:14px;color:#666;line-height:1.65}
/* RESPONSIVE */
.nav-burger{display:none;font-size:24px;color:#222;cursor:pointer;margin-right:4px;width:28px;height:28px;line-height:28px;text-align:center}
img,video{max-width:100%}
.mobile-gallery{display:none;position:relative}
.mg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:min(78vh,540px);border-radius:8px;background:#fff}
.mg-track::-webkit-scrollbar{display:none}
.mg-slide{flex:0 0 100%;scroll-snap-align:center;height:100%;display:flex;align-items:center;justify-content:center}
.mg-slide img{width:100%;height:100%;object-fit:contain;display:block}
.mg-dots{display:none;justify-content:center;flex-wrap:wrap;gap:7px;margin:12px 0 6px}
.mg-dot{width:7px;height:7px;border-radius:50%;background:#cfcfcf;border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.mg-dot.active{background:#2fa8a0;transform:scale(1.35)}
.mg-arrow{position:absolute;top:calc(min(78vh,540px) / 2);transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 1px 7px rgba(0,0,0,.22);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;line-height:1;color:#222;z-index:2}
.mg-arrow.prev{left:8px}.mg-arrow.next{right:8px}
@media(max-width:900px){
  .care-body{grid-template-columns:1fr;gap:36px;padding:32px 20px 48px}
  .care-heading{font-size:30px}
  .care-topbar{padding:14px 18px}
  .auth-panels{grid-template-columns:1fr;padding:0 20px 48px}
  .auth-panel{padding:0 0 36px}
  .auth-panel:last-child{padding:36px 0 0;border-left:none;border-top:1px solid #eee}
  .auth-tabs{display:flex}
  .auth-panel{display:none}
  .auth-panel.active{display:block}
  .auth-welcome{padding:24px 20px 0;font-size:22px}
}
@media(max-width:560px){
  .care-row2{grid-template-columns:1fr}
  .auth-topbar{padding:14px 18px}
}
@media(min-width:1700px){
  body{font-size:16px}
  .product-area,.below-fold,.also-inner,.fc-cols,.footer-bot{max-width:1600px}
  .right-col{width:520px}
  .img-left,.img-right{height:420px}
  .prod-title{font-size:34px}
  .price-num{font-size:26px}
  .add-btn{font-size:16px;padding:20px}
  .ann-bar{font-size:22px}
  .nav-links a{font-size:14px}
}
@media(max-width:1180px){.nav-links{gap:16px}.nav-links a{font-size:11.5px}.right-col{width:380px;padding-right:24px}.left-col{padding-left:24px}}
@media(max-width:767px){
  /* Sand Cloud–style nav: menu+search left, logo centered, cart right */
  nav{padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .nav-burger{display:block}
  .country-pill{display:none}
  .nav-left{display:flex;justify-self:start}
  .logo-wrap{justify-self:center;gap:8px}
  .nav-right{justify-self:end}
  .nav-right .ti-search,.nav-right .ti-help-circle{display:none}
  /* Cart moves to the left cluster on mobile; account stays on the right */
  .nav-right .cart-trigger{display:none}
  .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;justify-content:flex-start;gap:0;background:#fff;border-bottom:1px solid #e5e5e5;box-shadow:0 8px 18px rgba(0,0,0,.08);max-height:0;overflow:hidden;transition:max-height .28s ease;flex:none;z-index:25}
  .nav-links.open{max-height:520px}
  .nav-links a{padding:14px 20px;border-bottom:1px solid #f1f1f1;font-size:13px;width:100%}
  .product-area{flex-direction:column}
  .left-col{padding:0 20px;width:100%}
  .right-col{width:100%;position:static;max-height:none;border-left:none;border-top:1px solid #f0f0f0;padding:24px 20px 32px;overflow:visible}
  .img-left,.img-right{height:auto;aspect-ratio:3/4}
  .also-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .also-section .bf-heading{font-size:44px}
  .ac-img{height:340px}
}
@media(max-width:767px){
  .left-col>.dual-img,.left-col>.row-full,.left-col>.row-two{display:none}
  .mobile-gallery{display:block}
}
@media(max-width:767px){
  .ann-bar{font-size:13px;padding:8px}
  /* Phone nav: hamburger left, big centered logo (no wordmark), cart icon right */
  nav{height:74px;padding:0 16px}
  .brand-name{display:none}
  .logo-circle{width:64px;height:64px;font-size:8px}
  .logo-wrap img{width:64px !important;height:64px !important}
  .nav-links{top:74px}
  .nav-right,.nav-left{gap:12px}
  .nav-right i,.nav-left i{font-size:19px}
  /* Cart removed from the nav entirely on phones */
  .nav-left-cart{display:none}
  /* Search + account move OUT of the top bar and into the dropdown menu */
  .nav-left .ti-search{display:none}
  .nav-account{display:none}
  /* Cart icon shown in the top-right corner instead of the account icon */
  .nav-deals-mobile{display:flex}
  .nav-deals-mobile i{font-size:21px;color:#222}
  /* Search + Account + Customer Care rows inside the open menu */
  .nav-menu-extra{display:flex;color:#222}
  .nav-menu-extra i{font-size:17px}
  /* Customer Care prompt under Add to Bag — phone only; desktop keeps the header icon */
  .pdp-care-link{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;padding:13px 14px;background:#FAF6EE;border-radius:10px;font-size:12.5px;line-height:1.5;color:#4a453d}
  .pdp-care-link i{font-size:16px;color:#2fa8a0;flex-shrink:0;margin-top:1px}
  .pdp-care-link a{color:#2fa8a0;font-weight:700;text-decoration:none}
  .pdp-care-link a:hover{text-decoration:underline}
  .prod-title{font-size:24px}
  /* Phone: product title + rating above the image, LEFT-aligned (Sand Cloud layout) */
  .pa-mobile-head{display:block;width:100%;padding:14px 20px 8px;text-align:left}
  .pa-mobile-head .prod-title{font-size:26px;margin-bottom:16px}
  .pa-mobile-head .stars-row{justify-content:flex-start;margin-bottom:0}
  .right-col>.prod-title,.right-col>.stars-row{display:none}
  /* Sand Cloud image nav: no arrows on phone — swipe + dots only */
  .mg-arrow{display:none}
  /* Image box: 4:5 ratio. Whole picture is shown (contain) so nothing is cropped;
     the two main product shots still fill the frame (cover) so the hero looks full. */
  .mg-track{height:auto;aspect-ratio:4/5}
  .mg-slide img{object-fit:contain}
  .mg-slide:nth-child(1) img,.mg-slide:nth-child(2) img{object-fit:cover}
  /* Buy box: tighter, left-aligned selected-style */
  .right-col{padding-top:16px}
  .style-price-line{margin-bottom:14px}
  .swatches{margin-bottom:18px}
  .price-num{font-size:20px}
  .rev-grid{grid-template-columns:1fr}
  /* Footer: 2 columns on phone to match desktop (Shop column removed) */
  .fc-cols{grid-template-columns:repeat(2,1fr);gap:10px}
  .fc-col h4{font-size:9.5px;letter-spacing:.06em}
  .fc-col a{font-size:10.5px}
  .footer-bot{justify-content:center;text-align:center}
  .footer-main,.below-fold,.footer-sms{padding-left:18px;padding-right:18px}
  .fs-form{flex-direction:column}
  .fs-input,.fs-btn{width:100%}
  .cart-drawer{width:100%}
  .co-left,.co-right{padding:24px 18px 40px}
  .co-topbar{padding:14px 18px}
  .also-section{padding:54px 0 44px 14px;background:#fff;overflow:hidden}
  .also-inner{max-width:none;margin:0}
  .also-section .bf-heading{font-size:28px;line-height:36px;font-weight:500;letter-spacing:0;text-align:center;margin:0 14px 18px 0;color:#111}
  .also-grid{display:flex;grid-template-columns:none;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:0 14px 4px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .also-grid::-webkit-scrollbar{display:none}
  .ac{flex:0 0 238px;scroll-snap-align:start;background:transparent;border:none;border-radius:0;overflow:visible}
  .ac-img{height:298px;display:block;background:#fff;border-bottom:1px solid #f4f4f4;overflow:hidden;position:relative}
  .ac-img-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ac-img-track::-webkit-scrollbar{display:none}
  .ac-img img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:center bottom;scroll-snap-align:start;position:static;opacity:1;transform:none}
  .ac-img .ac-hover-img{display:block}
  .ac:hover .ac-main-img,.ac:hover .ac-hover-img{opacity:1;transform:none}
  .ac-img-dots{position:absolute;top:9px;left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none}
  .ac-img-dots span{width:8px;height:8px;border-radius:50%;background:#d7d7d7;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
  .ac-img-dots span:last-child{background:#111}
  .ac-info{padding:13px 0 0}
  .ac-name{font-size:16px;line-height:22px;font-weight:500;letter-spacing:0;color:#2a2d33;margin-bottom:5px}
  .ac-stars .st{font-size:15px}
  .ac-stars .ct{font-size:14px}
  .ac-price{font-size:15px;line-height:20px;font-weight:500;color:#111}
  .ac-add-btn{height:43px;padding:0 12px;margin-top:36px;font-size:15px;border-radius:5px}
}
@media(max-width:380px){
  .nav-right .ti-help-circle{display:none}
  .prod-title{font-size:22px}
  .also-section{padding-left:12px}
  .also-grid{gap:16px;padding-right:12px}
  .ac{flex-basis:226px}
  .ac-img{height:286px}
}
@media(hover:none){.ag-cell{aspect-ratio:9/16}}
@media(max-width:860px){.co-wrap{grid-template-columns:1fr}.co-left{border-right:none;border-bottom:1px solid #eee}.co-left,.co-right{padding:28px 22px 44px}}
/* iPads & tablets (768px and up) use the full desktop / PC layout. The only tablet tweak is below: show the WHOLE product photo instead of cropping it. */
@media(min-width:768px) and (max-width:1024px){
  .dual-img{align-items:start}
  .img-left,.img-right{height:auto}
  .img-panel img{height:auto;object-fit:contain}
}
/* ══════════════════════════════════
   TRENDY NICHES COLLECTION PAGE
   ══════════════════════════════════ */
.bs-screen{position:fixed;inset:0;background:#fff;z-index:400;overflow-y:auto;display:none}
.bs-screen.open{display:block}
.bs-topbar{border-bottom:1px solid #eee;padding:14px 32px;display:flex;align-items:center;gap:16px;position:sticky;top:0;background:#fff;z-index:6}
.bs-back{font-size:24px;color:#222;cursor:pointer;line-height:1;user-select:none}
.bs-back:hover{color:#2fa8a0}
.bs-logo{display:flex;align-items:center;gap:10px}
.bs-logo .logo-circle{width:38px;height:38px;font-size:6px}
.bs-announce{background:#1a3c4e;color:#fff;text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;padding:10px;text-transform:uppercase}
.bs-announce b{color:#e8934a}
.bs-crumb{max-width:1320px;margin:0 auto;padding:22px 32px 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;text-align:center}
.bs-crumb h1{font-family:'Georgia',serif;font-size:30px;font-weight:400;color:#1a3c4e}
.bs-crumb span{font-size:13px;color:#999}
.bs-toolbar{max-width:1320px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}
.bs-filter-toggle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1a3c4e;cursor:pointer;background:none;border:none}
.bs-sortwrap{position:relative}
.bs-sort{appearance:none;border:1px solid #ddd;border-radius:6px;padding:11px 38px 11px 16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1a3c4e;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
.bs-sort:focus{outline:none;border-color:#2fa8a0}
.bs-layout{max-width:1680px;margin:0 auto;padding:24px 32px 64px}
.bs-filters{position:sticky;top:120px;height:fit-content}
.bs-fgroup{border-bottom:1px solid #eee;padding:6px 0 14px;margin-bottom:8px}
.bs-fhead{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px 0;user-select:none}
.bs-fhead b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1a3c4e}
.bs-fhead .chev{font-size:14px;color:#888;transition:transform .2s}
.bs-fhead.collapsed .chev{transform:rotate(-90deg)}
.bs-fbody{padding-top:6px}
.bs-fbody.hidden{display:none}
.bs-chips{display:flex;flex-wrap:wrap;gap:7px}
.bs-chip{border:1px solid #ddd;border-radius:6px;padding:8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#444;cursor:pointer;background:#fff;transition:all .15s}
.bs-chip:hover{border-color:#2fa8a0}
.bs-chip.active{background:#1a3c4e;color:#fff;border-color:#1a3c4e}
.bs-colors{display:flex;flex-wrap:wrap;gap:9px}
.bs-color{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s}
.bs-color:hover{transform:scale(1.12)}
.bs-color.active{border-color:#1a3c4e;box-shadow:0 0 0 2px #fff inset}
.bs-price-track{height:4px;background:#e5e5e5;border-radius:2px;position:relative;margin:18px 4px 12px}
.bs-price-fill{position:absolute;height:100%;background:#2fa8a0;border-radius:2px;left:0;right:25%}
.bs-price-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #2fa8a0;transform:translate(-50%,-50%)}
.bs-price-row{display:flex;justify-content:space-between;font-size:12px;color:#555;font-weight:600}
.bs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.bs-card{border:1px solid #ececec;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;background:#fff}
.bs-card:hover{box-shadow:0 8px 26px rgba(0,0,0,.09);transform:translateY(-3px)}
.bs-card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f4f4f2}
.bs-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.bs-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bs-badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:4px;color:#fff}
.bs-badge.off{background:#c0392b}
.bs-badge.best{background:#1a3c4e}
.bs-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.bs-card-name{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#111;margin-bottom:7px}
.bs-card-stars{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.bs-card-stars .st{color:#f5a623;font-size:12px;letter-spacing:1px}
.bs-card-stars .ct{font-size:11px;color:#888}
.bs-card-price{font-size:14px;font-weight:700;color:#111;margin-bottom:13px}
.bs-card-price .was{color:#c0392b;text-decoration:line-through;font-weight:400;margin-right:7px}
.bs-card-btn{margin-top:auto;width:100%;background:#111;color:#fff;border:none;padding:12px;border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.bs-card-btn:hover{background:#2fa8a0}
.bs-card-btn.added{background:#2fa8a0}
.bs-footer-note{text-align:center;font-size:12px;color:#999;padding:0 32px 40px}
@media(max-width:1024px){
  .bs-layout{grid-template-columns:1fr;gap:0}
  .bs-filters{display:none;position:static}
  .bs-filters.open{display:block;margin-bottom:24px;border:1px solid #eee;border-radius:10px;padding:8px 16px 16px}
  .bs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .bs-topbar,.bs-crumb,.bs-toolbar,.bs-layout{padding-left:18px;padding-right:18px}
  .bs-crumb h1{font-size:24px}
  .bs-grid{grid-template-columns:1fr 1fr;gap:14px}
  .bs-card-name{font-size:11.5px}
  .bs-card-btn{padding:11px;font-size:10px}
}
@media(max-width:420px){.bs-grid{grid-template-columns:1fr}}
/* ============================================================
   Accessibility helpers (added for Shopify OS 2.0)
   ============================================================ */
.skip-to-content-link{position:absolute;left:-9999px;z-index:9999;padding:10px 16px;background:#111;color:#fff;border-radius:0 0 6px 0;font-size:13px;font-weight:700}
.skip-to-content-link:focus{left:0;top:0}
.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}
:focus-visible{outline:2px solid var(--color-teal,#2fa8a0);outline-offset:2px}
/* iPad/tablet layout: give gallery full width so photos fill properly */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-area {
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .left-col {
    width: 100% !important;
    padding: 0 20px !important;
  }

  .right-col {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    border-left: none !important;
    border-top: 1px solid #f0f0f0 !important;
    padding: 24px 20px 32px !important;
  }

  .dual-img,
  .row-two {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .dual-img .img-panel,
  .row-two .panel {
    height: 520px !important;
    overflow: hidden !important;
  }

  .dual-img .img-panel img,
  .row-two .panel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}
.ye-header{

text-align:center;

max-width:850px;

margin:0 auto 55px;

}

.ye-eyebrow{

display:inline-block;

padding:8px 18px;

border-radius:100px;

background:#F6F6F6;

font-size:11px;

font-weight:700;

letter-spacing:.18em;

text-transform:uppercase;

color:#666;

margin-bottom:18px;

}

.ye-related__heading{

font-size:46px;

font-weight:700;

line-height:1.1;

margin:0;

}

.ye-subheading{

margin-top:18px;

font-size:18px;

color:#666;

line-height:1.7;

}

.ye-feature-row{

display:flex;

justify-content:center;

gap:16px;

flex-wrap:wrap;

margin-top:30px;

}

.ye-feature-row span{

padding:10px 18px;

background:#fff;

border:1px solid #ECECEC;

border-radius:100px;

font-size:14px;

font-weight:600;

}
/* ==========================================================================
   Collection Header - Exact Proportional Spacing (Fix for stubborn margins)
   ========================================================================== */

/* Parent Container Tightening */
.bs-crumb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px!important;
    gap: 0px !important; /* Overrides default theme flex gaps */
    min-height: auto !important; /* Prevents the container from stretching */
}

/* Main Collection Title */
.bs-crumb h1,
.bs-screen h1,
.template-collection h1,
main h1 {
    color: #2b3e4d !important;
    font-size: 32px !important;
    text-align: center !important;
    margin-top: 60px !important;
    margin-bottom: 4px !important; /* Super tight spacing */
    padding-bottom: 0 !important;
    line-height: 1 !important;
}

/* Subtitle Text */
.collection-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    text-align: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 45px !important; /* Space above the product grid */
    line-height: 1.3 !important;
    display: block !important;
}
.ye-style-badge{
    display:inline-block;
    margin-bottom:6px;
    padding:4px 10px;
    border-radius:999px;
    background:#F5F5F5;
    color:#555;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.ye-style-desc{
    margin:8px 0 14px;
    color:#666;
    font-size:13px;
    line-height:1.45;
    min-height:38px;
}/* ============================================================
   FORCE 4 COLUMNS DESKTOP
============================================================ */

/* Desktop */
@media (min-width: 961px) {

  .ye-related__grid{
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 24px !important;
      width: 100% !important;
  }

  .ye-related__grid > *{
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      flex: none !important;
  }

  .ye-related__grid .ye-card{
      width: auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      flex: none !important;
  }

}

/* Tablet */
@media (max-width: 960px) {
  .ye-related__grid{
      grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 749px) {
  .ye-related__grid{
      grid-template-columns: 1fr !important;
  }
}
/* ==========================================================================
   FOOTER REDESIGN — Waikiki Essentials
   Scoped to footer classes only; overrides the legacy footer styles above.
   ========================================================================== */

/* Section 1 — Brand story (full-width navy band, content centered) */
.fb-brand{
  width:100%;
  max-width:none;
  margin:0;
  padding:38px 24px 6px;
  text-align:center;
  background:#0d2535;
}
.fb-brand-title{
  font-size:26px;
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
  margin-bottom:10px;
}
.fb-brand-text{
  max-width:760px;
  margin:0 auto;
  font-size:15.5px;
  line-height:1.6;
  color:#a8dce8;
}

/* Section 2 — Trust badges (full-width navy band; 4 equal columns, content max 1200px) */
.fb-trust{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:none;
  margin:0;
  padding:18px max(24px, calc((100% - 1200px) / 2)) 32px;
  background:#0d2535;
}
.fb-trust-item{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  padding:4px 12px;
}
.fb-trust-item i{
  font-size:25px;
  color:#7ecfca;
  line-height:1;
}
.fb-trust-item span{
  font-size:14px;
  line-height:1.35;
  color:#d5e4ea;
  font-weight:600;
}
.fb-trust-item + .fb-trust-item{
  border-left:1px solid rgba(255,255,255,.12);
}

/* Section 3 — Newsletter (email signup, compact) */
.footer-sms{
  padding:26px 24px;
}
.fs-title{font-size:16px}
.fs-sub{font-size:12.5px;margin-bottom:12px}
.fs-form{max-width:560px}
.fs-input{padding:11px 14px;font-size:13.5px;min-width:0}
.fs-btn{padding:11px 22px;font-size:13.5px}

/* Section 4 — Nav columns (readable) */
.fc-cols{
  max-width:1100px;
}
.fc-col h4{
  font-size:12px;
  margin-bottom:12px;
}
.fc-col a{
  font-size:13px;
  margin-bottom:9px;
  line-height:1.4;
}

/* Section 5 — Bottom bar: logo | copyright | socials + payments */
.footer-main{
  padding:28px 32px 32px;
}
.footer-bot{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  max-width:1100px;
  padding-top:18px;
}
.fb-logo{font-size:15px}
.fb-copy{font-size:11.5px;text-align:center}
.fb-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  justify-self:end;
}
.fb-soc{display:flex;gap:14px}
.fb-soc i{font-size:19px}
.pay-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:flex-end;
}
.pay-item{
  display:flex;
  align-items:center;
}
.payment-icon{
  height:24px;
  width:auto;
  display:block;
}

/* Tablet — bottom bar recenters, payment icons wrap */
@media (max-width: 960px){
  .footer-bot{
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
    text-align:center;
  }
  .fb-right{
    align-items:center;
    justify-self:center;
  }
  .pay-list{justify-content:center}
}

/* Mobile — 2x2 trust grid, full-width newsletter, stacked centered bottom bar */
@media (max-width: 767px) {
  .fb-brand{padding:30px 18px 2px}
  .fb-brand-title{font-size:19px}
  .fb-brand-text{font-size:13px}
  .fb-trust{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px 10px;
    padding:16px 18px 26px;
  }
  .fb-trust-item{padding:0}
  .fb-trust-item i{font-size:24px}
  .fb-trust-item span{font-size:13.5px}
  .fb-trust-item + .fb-trust-item{border-left:none}
  .fs-input{width:100%}
  .fs-btn{width:100%}
  .fc-col h4{font-size:12px;letter-spacing:.08em}
  .fc-col a{font-size:13.5px}
  .fb-soc{justify-content:center}
  .fb-soc i{font-size:20px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PRODUCT CARD IMAGE FIX — show the FULL photo, never crop
   (mobile only, ≤767px). Desktop layout & hover behavior unchanged.
   The Trendy Niches collection cards use .ac-img / .ac-img-track /
   .ac-img img. On mobile these previously had a fixed height
   (298px / 286px) with object-fit:cover, which cropped the photos.
   ══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  /* Image area: drop the fixed height / forced ratio so the box
     grows with the image's natural proportions instead of cropping */
  .ac-img {
    height: auto;
    aspect-ratio: auto;
    overflow: hidden;
  }

  /* Swipe track: let height follow the image; horizontal swipe (and
     scroll-snap) stays intact */
  .ac-img-track {
    height: auto;
    align-items: flex-start;
  }

  /* Each photo fills the card width at its natural ratio — no crop */
  .ac-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

/* ============================================================
   WAIKIKI ESSENTIALS — FINAL FOOTER OVERRIDES
   ============================================================ */

/* ------------------------------------------------------------
   FOOTER MAIN
   ------------------------------------------------------------ */

.footer-main {
  background: var(--waikiki-navy);
  color: var(--waikiki-white);
  padding: 34px 32px 24px;
}


/* ------------------------------------------------------------
   FOOTER COLUMNS
   TRUE 3-COLUMN LAYOUT
   ------------------------------------------------------------ */

.fc-cols {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 0;

  padding-bottom: 30px;
}


/* Each column stays aligned from the same top edge */

.fc-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* Column headings */

.fc-col h4 {
  width: 100%;

  margin: 0 0 16px;

  color: var(--waikiki-aqua);

  font-size: 12px;
  line-height: 1.2;

  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}


/* Footer links */

.fc-col a {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0 0 10px;

  color: rgba(255,255,255,.58);

  text-decoration: none;

  font-size: 13px;
  line-height: 1.45;

  transition:
    color .2s ease,
    padding-left .2s ease;
}


/* Consistent link alignment */

.fc-col a:hover {
  color: #fff;
  padding-left: 3px;
}


/* ------------------------------------------------------------
   BOTTOM ROW
   ------------------------------------------------------------ */

.footer-bot {
  width: 100%;
  max-width: 1100px;

  margin: 0 auto;

  padding-top: 22px;

  border-top: 1px solid var(--waikiki-border);

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  column-gap: 24px;
}


/* ------------------------------------------------------------
   LOGO
   ------------------------------------------------------------ */

.fb-logo {
  justify-self: start;

  font-size: 17px;
  line-height: 1;

  font-weight: 800;

  color: var(--waikiki-aqua);

  white-space: nowrap;
}

.fb-logo em {
  color: #F18B3A;
  font-style: normal;
}


/* ------------------------------------------------------------
   COPYRIGHT
   ------------------------------------------------------------ */

.fb-copy {
  justify-self: center;

  color: rgba(255,255,255,.38);

  font-size: 11px;
  line-height: 1.4;

  text-align: center;

  white-space: nowrap;
}


/* ------------------------------------------------------------
   RIGHT SIDE
   ------------------------------------------------------------ */

.fb-right {
  justify-self: end;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 12px;

  min-width: 0;
}


/* ------------------------------------------------------------
   SOCIAL MEDIA
   ------------------------------------------------------------ */

.fb-soc {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 16px;

  min-height: 24px;
}


/* Actual clickable icons */

.fb-soc a,
.fb-soc > i,
.fb-soc > span {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  color: rgba(255,255,255,.68);

  font-size: 19px;

  line-height: 1;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}


/* Hover */

.fb-soc a:hover {
  color: var(--waikiki-aqua);

  transform: translateY(-2px);
}


/* Blank/unconfigured social icon */

.fb-soc > i,
.fb-soc > span {
  cursor: default;
}


/* ------------------------------------------------------------
   PAYMENT METHODS
   ------------------------------------------------------------ */

.fb-pay {
  width: 100%;

  margin-top: 0;

  padding-top: 12px;

  border-top: 1px solid var(--waikiki-border);

  text-align: right;
}


.fb-pay-title {
  display: block;

  margin-bottom: 9px;

  color: rgba(255,255,255,.45);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* Payment list */

.pay-list {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  list-style: none;

  padding: 0;
  margin: 0;
}


/* Individual payment icon */

.pay-item {
  display: flex;

  align-items: center;
  justify-content: center;
}


/* Native Shopify SVG */

.payment-icon {
  display: block;

  width: auto;
  height: 23px;

  max-width: 42px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 960px) {

  .footer-main {
    padding-left: 24px;
    padding-right: 24px;
  }

  .fc-cols {
    column-gap: 40px;
  }

  .footer-bot {
    grid-template-columns: 1fr;
    row-gap: 18px;

    justify-items: center;

    text-align: center;
  }

  .fb-logo,
  .fb-copy,
  .fb-right {
    justify-self: center;
  }

  .fb-right {
    align-items: center;
  }

  .fb-soc {
    justify-content: center;
  }

  .fb-pay {
    text-align: center;
  }

  .pay-list {
    justify-content: center;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  .footer-main {
    padding: 30px 18px 22px;
  }


  /* ---------------------------------------------
     KEEP ALL THREE FOOTER COLUMNS ON ONE ROW
     --------------------------------------------- */

  .fc-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    column-gap: 10px;

    padding-bottom: 24px;
  }


  .fc-col {
    min-width: 0;
  }


  .fc-col h4 {
    width: 100%;

    margin-bottom: 13px;

    font-size: 9.5px;
    line-height: 1.25;

    letter-spacing: .07em;

    white-space: normal;
  }


  .fc-col a {
    width: 100%;

    padding-bottom: 9px;

    font-size: 10.5px;
    line-height: 1.35;

    white-space: normal;
  }


  /* ---------------------------------------------
     BOTTOM ROW
     --------------------------------------------- */

  .footer-bot {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding-top: 20px;

    text-align: center;
  }


  /* ---------------------------------------------
     SOCIAL ICONS FIRST
     --------------------------------------------- */

  .fb-right {
    order: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 13px;
  }


  .fb-soc {
    order: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    width: 100%;
  }


  .fb-soc a,
  .fb-soc > i,
  .fb-soc > span {
    width: 24px;
    height: 24px;

    font-size: 20px;
  }


  /* ---------------------------------------------
     PAYMENT ICONS
     --------------------------------------------- */

  .fb-pay {
    order: 2;

    width: 100%;

    margin-top: 0;

    padding-top: 13px;

    text-align: center;
  }


  .fb-pay-title {
    margin-bottom: 8px;

    font-size: 8.5px;
  }


  .pay-list {
    justify-content: center;

    gap: 5px;
  }


  .payment-icon {
    height: 21px;

    max-width: 40px;
  }


  /* ---------------------------------------------
     LOGO
     --------------------------------------------- */

  .fb-logo {
    order: 2;

    justify-self: center;

    font-size: 15px;
  }


  /* ---------------------------------------------
     COPYRIGHT
     --------------------------------------------- */

  .fb-copy {
    order: 3;

    justify-self: center;

    font-size: 9.5px;

    line-height: 1.45;

    white-space: normal;

    max-width: 100%;
  }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

  .fc-cols {
    column-gap: 7px;
  }

  .fc-col h4 {
    font-size: 8.5px;
  }

  .fc-col a {
    font-size: 9.5px;
  }

  .fb-soc {
    gap: 14px;
  }

}
/* =========================================================
   WAIKIKI ESSENTIALS — FINAL FOOTER NAVIGATION
   PC + TABLET = 3 EQUAL COLUMNS
   MOBILE = 1 COLUMN
   ========================================================= */

.wk-footer-nav {
  width: min(1180px, calc(100% - 60px)) !important;
  margin: 0 auto !important;
  padding: 40px 0 28px !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;

  column-gap: 70px !important;
  row-gap: 0 !important;

  align-items: start !important;
  box-sizing: border-box !important;
}

/* =========================================================
   ALL THREE COLUMNS
   ========================================================= */

.wk-footer-nav .wk-footer-column {
  width: 100% !important;
  min-width: 0 !important;

  grid-column: auto !important;
  grid-row: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  align-self: start !important;
  justify-self: stretch !important;
}

/* Explicit positions — prevents old CSS from moving columns */

.wk-footer-nav .wk-footer-column:nth-child(1) {
  grid-column: 1 !important;
}

.wk-footer-nav .wk-footer-column:nth-child(2) {
  grid-column: 2 !important;
}

.wk-footer-nav .wk-footer-column:nth-child(3) {
  grid-column: 3 !important;
}

/* =========================================================
   COLUMN TITLES
   ========================================================= */

.wk-footer-nav .wk-footer-column-title {
  display: block !important;

  margin: 0 0 16px !important;
  padding: 0 !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* =========================================================
   LINKS
   ========================================================= */

.wk-footer-nav .wk-footer-column-links {
  list-style: none !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 11px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.wk-footer-nav .wk-footer-column-links li {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
}

.wk-footer-nav .wk-footer-column-links a {
  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 14px !important;
  line-height: 1.45 !important;

  text-decoration: none !important;

  transition:
    opacity 0.2s ease,
    color 0.2s ease !important;
}

.wk-footer-nav .wk-footer-column-links a:hover {
  opacity: 0.75 !important;
}


/* =========================================================
   TABLET
   768px – 1023px
   EXACTLY THE SAME 3-COLUMN STRUCTURE AS PC
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  .wk-footer-nav {
    width: calc(100% - 48px) !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;

    column-gap: 36px !important;
    row-gap: 0 !important;

    padding: 38px 0 26px !important;

    align-items: start !important;
  }

  .wk-footer-nav .wk-footer-column {
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wk-footer-nav .wk-footer-column:nth-child(1) {
    grid-column: 1 !important;
  }

  .wk-footer-nav .wk-footer-column:nth-child(2) {
    grid-column: 2 !important;
  }

  .wk-footer-nav .wk-footer-column:nth-child(3) {
    grid-column: 3 !important;
  }

  .wk-footer-nav .wk-footer-column-title {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }

  .wk-footer-nav .wk-footer-column-links {
    gap: 10px !important;
  }

  .wk-footer-nav .wk-footer-column-links a {
    font-size: 13px !important;
  }
}


/* =========================================================
   MOBILE
   BELOW 768px
   ONE COLUMN
   ========================================================= */

@media screen and (max-width: 767px) {

  .wk-footer-nav {
    width: calc(100% - 40px) !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;

    column-gap: 0 !important;
    row-gap: 28px !important;

    padding: 30px 0 24px !important;

    align-items: start !important;
  }

  .wk-footer-nav .wk-footer-column {
    grid-column: 1 !important;
    grid-row: auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .wk-footer-nav .wk-footer-column-title {
    margin: 0 0 13px !important;
  }

  .wk-footer-nav .wk-footer-column-links {
    gap: 10px !important;
  }

  .wk-footer-nav .wk-footer-column-links a {
    font-size: 13px !important;
  }
}
/* FOOTER LOGO — MAKE BIGGER */
.wk-footer-bottom-brand {
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.wk-footer-bottom-brand em {
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
}
/* =========================================================
   WAIKIKI ESSENTIALS — FOOTER LOGO
   FORCE BIGGER SIZE
   ========================================================= */

.footer-bot .fb-logo {
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.footer-bot .fb-logo em {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 800 !important;
  font-style: normal !important;
}

/* DESKTOP */
@media screen and (min-width: 1024px) {
  .footer-bot .fb-logo {
    font-size: 30px !important;
  }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .footer-bot .fb-logo {
    font-size: 27px !important;
  }
}

/* PHONE */
@media screen and (max-width: 767px) {
  .footer-bot .fb-logo {
    font-size: 24px !important;
  }
}
/* ============================================================
   WAIKIKI ESSENTIALS
   PHONE PRODUCT CARDS — NO CAROUSEL
   ONE PRODUCT PER ROW
   FULL IMAGE / FIXED 4:5 IMAGE BOX
   ============================================================ */

@media screen and (max-width: 767px) {

  /* ----------------------------------------------------------
     SECTION
     ---------------------------------------------------------- */

  .also-section {
    width: 100% !important;
    padding: 32px 16px 44px !important;

    overflow: visible !important;
  }

  .also-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }


  /* ----------------------------------------------------------
     PRODUCT GRID
     
     NO horizontal scrolling
     NO carousel
     NO snapping
     ---------------------------------------------------------- */

  .also-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;

    gap: 42px !important;

    overflow: visible !important;

    padding: 0 !important;

    scroll-snap-type: none !important;

    -webkit-overflow-scrolling: auto !important;
  }

  .also-grid::-webkit-scrollbar {
    display: none !important;
  }


  /* ----------------------------------------------------------
     ONE PRODUCT CARD
     ---------------------------------------------------------- */

  .also-grid .ac {

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: none !important;

    scroll-snap-align: none !important;

    margin: 0 !important;

    background: transparent !important;

    overflow: visible !important;
  }


  /* ----------------------------------------------------------
     IMAGE BOX

     SAME SIZE FOR EVERY PRODUCT

     Width = screen width minus 32px
     Height = width × 1.25

     375px phone:
     343 × 429px

     412px phone:
     380 × 475px
     ---------------------------------------------------------- */

  .also-grid .ac .ac-img {

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 4 / 5 !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;

    display: block !important;

    background: #ffffff !important;

    border-radius: 12px !important;

    border: none !important;
  }


  /* ----------------------------------------------------------
     IMAGE TRACK
     ---------------------------------------------------------- */

  .also-grid .ac .ac-img-track {

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    overflow: hidden !important;

    scroll-snap-type: none !important;
  }


  /* ----------------------------------------------------------
     PRODUCT IMAGE

     SHOW ENTIRE IMAGE
     NEVER CROP
     ---------------------------------------------------------- */

  .also-grid .ac .ac-img img,
  .also-grid .ac .ac-img-track img,
  .also-grid .ac .ac-main-img {

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    max-width: 100% !important;

    min-height: 100% !important;
    max-height: 100% !important;

    display: block !important;

    object-fit: contain !important;

    object-position: center center !important;

    background: #ffffff !important;
  }


  /* ----------------------------------------------------------
     DISABLE HORIZONTAL IMAGE SWIPING
     ---------------------------------------------------------- */

  .also-grid .ac .ac-img-track {
    overflow-x: hidden !important;
    overflow-y: hidden !important;

    touch-action: pan-y !important;
  }


  /* ----------------------------------------------------------
     HOVER IMAGE
     ---------------------------------------------------------- */

  .also-grid .ac .ac-hover-img {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    object-position: center center !important;
  }


  /* ----------------------------------------------------------
     BADGES
     ---------------------------------------------------------- */

  .also-grid .ac .ac-badges-stack {

    position: absolute !important;

    top: 12px !important;
    left: 12px !important;

    z-index: 10 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 6px !important;
  }


  /* ----------------------------------------------------------
     PRODUCT INFORMATION
     ---------------------------------------------------------- */

  .also-grid .ac .ac-info {

    width: 100% !important;

    padding: 12px 0 0 !important;

    display: flex !important;

    flex-direction: column !important;
  }


  /* ----------------------------------------------------------
     STYLE BADGE
     ---------------------------------------------------------- */

  .also-grid .ac .ac-style-badge {

    width: 100% !important;

    box-sizing: border-box !important;

    margin-bottom: 8px !important;
  }


  /* ----------------------------------------------------------
     DESCRIPTION
     ---------------------------------------------------------- */

  .also-grid .ac .ac-style-desc {

    margin: 8px 0 14px !important;

    min-height: 0 !important;
  }


  /* ----------------------------------------------------------
     BUTTON
     ---------------------------------------------------------- */

  .also-grid .ac .ac-add-btn {

    width: 100% !important;

    margin-top: 12px !important;

    box-sizing: border-box !important;
  }

}


/* ============================================================
   SMALL PHONES
   SAME ONE-COLUMN LAYOUT
   NO SPECIAL CARD WIDTH
   ============================================================ */

@media screen and (max-width: 380px) {

  .also-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .also-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 38px !important;

    overflow: visible !important;

    padding: 0 !important;
  }

  .also-grid .ac {

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    flex: none !important;
  }

  .also-grid .ac .ac-img {

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 4 / 5 !important;
  }

}
/* ============================================================
   FINAL FIX — EQUAL HEIGHT CARDS
   "Can't Decide? Compare These Styles"
   ============================================================ */

@media (max-width: 767px) {

  .also-grid .ac {
    flex: 0 0 238px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .also-grid .ac-img {
    width: 100% !important;
    height: 298px !important;
    min-height: 298px !important;
    max-height: 298px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .also-grid .ac-img-track {
    width: 100% !important;
    height: 100% !important;
  }

  .also-grid .ac-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .also-grid .ac-info {
    width: 100% !important;
    min-height: 170px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .also-grid .ac-add-btn {
    margin-top: auto !important;
  }
}

@media (max-width: 380px) {
  .also-grid .ac {
    flex-basis: 226px !important;
  }

  .also-grid .ac-img {
    height: 286px !important;
    min-height: 286px !important;
    max-height: 286px !important;
  }
}

/* ============================================================
   TRENDY NICHES — MATCH "CAN'T DECIDE? COMPARE THESE STYLES"
   Card typography / colors / badges / CTA styling only.
   Scoped to the collection product list so other cards are untouched.
   ============================================================ */

.bs-collection-grid .ac {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #111111 !important;
}

.bs-collection-grid .ac .ac-info {
  width: 100% !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.bs-collection-grid .ac .ac-info > div:first-child {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #555555 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.bs-collection-grid .ac .ac-style-badge {
  display: inline-block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #F5F5F5 !important;
  color: #555555 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.bs-collection-grid .ac .ac-name {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #111111 !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

.bs-collection-grid .ac .ac-style-desc {
  margin: 8px 0 14px !important;
  color: #666666 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  min-height: 38px !important;
}

.bs-collection-grid .ac .ac-price {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin: 0 0 18px !important;
}

.bs-collection-grid .ac .ac-was {
  color: #AAAAAA !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  margin-right: 5px !important;
  font-size: 13px !important;
}

.bs-collection-grid .ac .ac-add-btn {
  width: 100% !important;
  min-height: 43px !important;
  height: 43px !important;
  padding: 0 14px !important;
  margin-top: auto !important;
  border: none !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.bs-collection-grid .ac .ac-add-btn:hover {
  filter: brightness(.94);
}


/* ============================================================
   TRENDY NICHES — PREMIUM HEADER + IMAGE HOVER / TOUCH PREVIEW
   ============================================================ */

/* Collection header */
.main-collection-section .tn-hero {
  position: relative;
  max-width: 1180px;
  margin: 34px auto 18px;
  padding: 54px 40px 42px;
  text-align: center;
  overflow: hidden;
  border-radius: 28px;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 18%, rgba(47,168,160,.16) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 12%, rgba(232,147,74,.14) 0 105px, transparent 106px),
    linear-gradient(135deg, #fbfffe 0%, #f4fbfa 48%, #fffaf4 100%);
  box-shadow: 0 18px 50px rgba(26,60,78,.07);
}
.main-collection-section .tn-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: -62px;
  height: 120px;
  background: rgba(255,255,255,.72);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-1.5deg);
}
.main-collection-section .tn-hero-glow {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}
.main-collection-section .tn-hero-glow-one {
  top: -125px;
  left: 17%;
  background: rgba(47,168,160,.12);
}
.main-collection-section .tn-hero-glow-two {
  right: 14%;
  bottom: -145px;
  background: rgba(232,147,74,.12);
}
.main-collection-section .tn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid rgba(47,168,160,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #2f7a74;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 5px 18px rgba(26,60,78,.05);
}
.main-collection-section .tn-eyebrow span {
  color: #e8934a;
  letter-spacing: 0;
}
.main-collection-section .tn-hero h1 {
  position: relative;
  z-index: 1;
  margin: 17px 0 10px !important;
  color: #1a3c4e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
}
.main-collection-section .tn-hero .collection-subtitle {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  color: #52636b !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.main-collection-section .tn-perks {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  position: relative;
  z-index: 1;
}
.main-collection-section .tn-perks span {
  padding: 9px 13px;
  border: 1px solid rgba(26,60,78,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #53636a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(26,60,78,.04);
}
.main-collection-section .tn-perks b {
  color: #1a3c4e;
  font-weight: 800;
}

/* Desktop: hover = animated second product photo */
@media (hover: hover) and (pointer: fine) {
  .bs-collection-grid .ac {
    transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .45s ease;
  }
  .bs-collection-grid .ac:hover {
    transform: translateY(-7px);
    filter: drop-shadow(0 17px 25px rgba(26,60,78,.12));
  }
  .bs-collection-grid .ac .ac-img {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #f6f8f6;
    box-shadow: 0 0 0 1px rgba(26,60,78,.055);
  }
  .bs-collection-grid .ac .ac-img-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .bs-collection-grid .ac .ac-main-img,
  .bs-collection-grid .ac .ac-hover-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transition:
      opacity .58s cubic-bezier(.22,.7,.2,1),
      transform .8s cubic-bezier(.2,.75,.25,1),
      filter .58s ease !important;
    will-change: opacity, transform;
  }
  .bs-collection-grid .ac .ac-main-img {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    z-index: 1;
  }
  .bs-collection-grid .ac .ac-hover-img {
    opacity: 0 !important;
    transform: scale(1.075) rotate(1.2deg) !important;
    z-index: 2;
  }
  .bs-collection-grid .ac:hover .ac-main-img {
    opacity: 0 !important;
    transform: scale(.96) rotate(-1deg) !important;
    filter: blur(1px);
  }
  .bs-collection-grid .ac:hover .ac-hover-img {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
  }
  .bs-collection-grid .ac .ac-img::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: -30%;
    left: -70%;
    width: 42%;
    height: 170%;
    pointer-events: none;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    opacity: 0;
  }
  .bs-collection-grid .ac:hover .ac-img::after {
    opacity: 1;
    animation: tn-image-sweep .85s ease-out both;
  }
  @keyframes tn-image-sweep {
    from { left: -70%; }
    to { left: 135%; }
  }
  .bs-collection-grid .ac .ac-badges-stack {
    transition: transform .45s cubic-bezier(.2,.75,.25,1);
  }
  .bs-collection-grid .ac:hover .ac-badges-stack {
    transform: translate3d(3px, -2px, 0);
  }
  .bs-collection-grid .ac .ac-img-dots {
    z-index: 12;
    opacity: 0;
    transform: translate(-50%, 5px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .bs-collection-grid .ac:hover .ac-img-dots {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Touch devices: tap the image once to preview photo 2.
   The next tap follows the card normally. */
@media (hover: none), (pointer: coarse) {
  .bs-collection-grid .ac .ac-img {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #f7f9f7 !important;
    box-shadow: 0 0 0 1px rgba(26,60,78,.06);
  }
  .bs-collection-grid .ac .ac-img-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .bs-collection-grid .ac .ac-main-img,
  .bs-collection-grid .ac .ac-hover-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transition: opacity .48s cubic-bezier(.22,.7,.2,1), transform .55s cubic-bezier(.2,.75,.25,1) !important;
  }
  .bs-collection-grid .ac .ac-main-img {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 1;
  }
  .bs-collection-grid .ac .ac-hover-img {
    opacity: 0 !important;
    transform: scale(1.045) !important;
    z-index: 2;
  }
  .bs-collection-grid .ac.tn-mobile-alt .ac-main-img {
    opacity: 0 !important;
    transform: scale(.97) !important;
  }
  .bs-collection-grid .ac.tn-mobile-alt .ac-hover-img {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .bs-collection-grid .ac .ac-img-dots {
    z-index: 15;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    transform: none !important;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  .bs-collection-grid .ac .ac-img-dots span {
    width: 7px;
    height: 7px;
    transition: transform .25s ease, background .25s ease;
  }
  .bs-collection-grid .ac .ac-img-dots .tn-dot-main { background: #1a3c4e; }
  .bs-collection-grid .ac .ac-img-dots .tn-dot-hover { background: #c9d0d0; }
  .bs-collection-grid .ac.tn-mobile-alt .ac-img-dots .tn-dot-main { background: #c9d0d0; }
  .bs-collection-grid .ac.tn-mobile-alt .ac-img-dots .tn-dot-hover { background: #1a3c4e; }
  .bs-collection-grid .ac .ac-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.28), transparent 42%);
  }
  .bs-collection-grid .ac.tn-mobile-alt .ac-img::after {
    animation: tn-mobile-flash .48s ease-out both;
  }
  @keyframes tn-mobile-flash {
    0% { opacity: .75; }
    100% { opacity: 0; }
  }
}

/* Mobile header */
@media (max-width: 767px) {
  .main-collection-section .tn-hero {
    margin: 14px 14px 8px;
    padding: 38px 18px 30px;
    border-radius: 22px;
  }
  .main-collection-section .tn-eyebrow {
    font-size: 8px;
    letter-spacing: .12em;
    padding: 7px 11px;
  }
  .main-collection-section .tn-hero h1 {
    margin-top: 14px !important;
    font-size: 38px !important;
  }
  .main-collection-section .tn-hero .collection-subtitle {
    margin-bottom: 18px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .main-collection-section .tn-perks {
    gap: 6px;
  }
  .main-collection-section .tn-perks span {
    padding: 7px 10px;
    font-size: 9.5px;
  }
  .bs-collection-grid { padding-top: 12px !important; }
}
@media (max-width: 420px) {
  .main-collection-section .tn-hero {
    margin-left: 10px;
    margin-right: 10px;
  }
  .main-collection-section .tn-perks span:last-child { display: none; }
}


@media (max-width: 380px) {
  .main-collection-section .bs-collection-grid {
    gap: 12px 9px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   MOBILE MENU DRAWER — FINAL COMPACT CARD DESIGN
   Header/logo/hamburger/desktop navigation are NOT changed.
   Only the contents of #navLinks when the hamburger is opened.
   ============================================================ */
@media (max-width: 767px) {
  #navLinks {
    top: 74px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    padding: 8px !important;
    max-height: 0 !important;
    overflow: hidden !important;

    background: rgba(255,255,255,.98) !important;
    border: 1px solid #e8e8e8 !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 12px 30px rgba(26,60,78,.14) !important;

    transition: max-height .25s ease, padding .25s ease !important;
  }

  #navLinks.open {
    max-height: 245px !important;
    padding: 8px !important;
  }

  #navLinks > a,
  #navLinks > a.nav-menu-extra {
    flex: 0 0 42px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;

    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 12px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background: transparent !important;
    color: #222 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #navLinks > a:hover,
  #navLinks > a:focus-visible,
  #navLinks > a:active {
    background: #f5f8f8 !important;
    outline: none !important;
  }

  /* Keep the exact existing text treatment for the first two links. */
  #navLinks > a:first-child {
    font-weight: 700 !important;
    color: #222 !important;
  }

  #navLinks > a.red {
    color: #2fa8a0 !important;
    font-weight: 700 !important;
  }

  /* Keep icon/text positions together exactly inside the extra rows. */
  #navLinks > a.nav-menu-extra {
    gap: 10px !important;
  }

  #navLinks > a.nav-menu-extra i {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;
    line-height: 1 !important;
    color: #222 !important;
  }

  /* Remove the HTML non-breaking-space from changing the visual alignment. */
  #navLinks > a.nav-menu-extra i + * {
    margin-left: 0 !important;
  }
}


/* ============================================================
   WAIKIKI ESSENTIALS — SCROLL REVEAL ANIMATIONS
   Safe, lightweight, responsive; respects reduced motion.
   ============================================================ */
.bs-collection-grid .wk-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(3px);
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;
  transition-delay: var(--wk-reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.bs-collection-grid .wk-scroll-reveal.wk-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Slight lift while the user is actively scrolling through the grid. */
.bs-collection-grid.wk-is-scrolling .ac.wk-revealed {
  transition-duration: .45s;
}

.main-collection-section .tn-hero {
  transition: transform .8s cubic-bezier(.2,.75,.25,1), box-shadow .8s ease;
}

.main-collection-section .tn-hero.wk-hero-visible {
  animation: wk-hero-arrive .85s cubic-bezier(.2,.75,.25,1) both;
}

@keyframes wk-hero-arrive {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width:767px) {
  .bs-collection-grid .wk-scroll-reveal {
    transform: translate3d(0, 24px, 0) scale(.99);
    filter: blur(2px);
    transition-duration: .55s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs-collection-grid .wk-scroll-reveal,
  .main-collection-section .tn-hero,
  .header-section > nav,
  .header-section .wk-header-logo-image,
  .header-section .brand-name {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Checkout-inspired header finish: warm off-white background. */
.header-section > nav{background:#f7f3ea !important;}


/* ============================================================
   PRODUCT PAGE — SPACE BELOW HEADER ON PC + TABLET
   Keeps phone spacing untouched.
   ============================================================ */
@media (min-width: 768px) {
  .template-product .product-area {
    margin: 20px auto 0 !important;
  }
}

/* ============================================================
   FINAL MOBILE ZARA-STYLE COLLECTION GRID
   Scoped only to Trendy Niches collection cards.
   Two true edge-to-edge columns; no mini-card gutters/shells.
   ============================================================ */
@media screen and (max-width: 767px) {
  .bs-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .bs-collection-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 44px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 2px !important;
    row-gap: 28px !important;
    box-sizing: border-box !important;
    align-items: start !important;
  }

  .bs-collection-grid .ac {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bs-collection-grid .ac .ac-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .bs-collection-grid .ac .ac-img-track {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
  }

  .bs-collection-grid .ac .ac-main-img,
  .bs-collection-grid .ac .ac-hover-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #fff !important;
  }

  .bs-collection-grid .ac .ac-badges-stack {
    top: 8px !important;
    left: 8px !important;
    gap: 4px !important;
  }

  .bs-collection-grid .ac .ac-info {
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px 8px 0 !important;
    box-sizing: border-box !important;
  }

  .bs-collection-grid .ac .ac-info > div:first-child {
    margin-bottom: 6px !important;
  }

  .bs-collection-grid .ac .ac-style-badge {
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 6px !important;
  }

  .bs-collection-grid .ac .ac-style-desc {
    margin-bottom: 8px !important;
  }

  .bs-collection-grid .ac .ac-add-btn {
    width: 100% !important;
    margin-top: 8px !important;
  }
}

@media screen and (max-width: 420px) {
  .bs-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 2px !important;
  }
}

/* ============================================================
   FINAL PHONE COLLECTION MATCH — ZARA-LIKE MOBILE GRID
   Product grid only. Preserve product content/functionality.
   ============================================================ */
@media screen and (max-width: 767px) {
  .bs-inline,
  .main-collection-section,
  .bs-layout {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .bs-collection-grid,
  .also-grid.bs-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 0 38px !important;
    column-gap: 9px !important;
    row-gap: 28px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    align-items: start !important;
  }

  .bs-collection-grid > .ac,
  .also-grid.bs-collection-grid > .ac {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bs-collection-grid > .ac > .ac-img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: #f4f4f2 !important;
    box-sizing: border-box !important;
  }

  .bs-collection-grid > .ac > .ac-img > .ac-img-track {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .bs-collection-grid > .ac > .ac-img .ac-main-img,
  .bs-collection-grid > .ac > .ac-img .ac-hover-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Smaller left-aligned badges so they don't cover the photo. */
  /* Ultra-compact mobile promo badges: visible, left-aligned, minimal photo coverage. */
  .bs-collection-grid > .ac > .ac-img .ac-badges-stack {
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    gap: 3px !important;
    z-index: 5 !important;
  }

  .bs-collection-grid > .ac > .ac-img .ac-badge {
    width: fit-content !important;
    max-width: calc(100% - 16px) !important;
    min-height: 0 !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }

  /* Product information sits outside the image, like Zara. */
  .bs-collection-grid > .ac > .ac-info {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 10px 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .bs-collection-grid > .ac > .ac-info .ac-style-badge {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .bs-collection-grid > .ac > .ac-info .ac-add-btn {
    border-radius: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   FINAL BADGE BACKGROUND FIX
   Keep the existing mobile badge dimensions/spacing exactly as-is;
   only force the promo + trending badges to have a solid, full
   background behind the entire badge area.
   ============================================================ */
.bs-collection-grid > .ac > .ac-img .ac-badge.promo,
.bs-collection-grid > .ac > .ac-img .ac-badge.trending,
.also-grid .ac .ac-badge.promo,
.also-grid .ac .ac-badge.trending,
.ac .ac-badge.promo,
.ac .ac-badge.trending {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background-image: none !important;
  background-color: #ed4b4b !important;
  color: #ffffff !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.bs-collection-grid > .ac > .ac-img .ac-badge.trending,
.also-grid .ac .ac-badge.trending,
.ac .ac-badge.trending {
  background-color: #ff4f16 !important;
}


/* ============================================================
   MOBILE BADGE SOLID BACKGROUND — HARD OVERRIDE
   Preserve all existing badge dimensions, font, spacing and position.
   Only force the promo/trending fill to cover the whole badge box.
   ============================================================ */
.bs-collection-grid .ac .ac-badge.promo,
.bs-collection-grid .ac .ac-badge.trending,
.also-grid .ac .ac-badge.promo,
.also-grid .ac .ac-badge.trending,
.ac .ac-badge.promo,
.ac .ac-badge.trending {
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.bs-collection-grid .ac .ac-badge.promo,
.also-grid .ac .ac-badge.promo,
.ac .ac-badge.promo {
  background-color: #ed4b4b !important;
  background: #ed4b4b !important;
}
.bs-collection-grid .ac .ac-badge.trending,
.also-grid .ac .ac-badge.trending,
.ac .ac-badge.trending {
  background-color: #ff4f16 !important;
  background: #ff4f16 !important;
}