/* ========== HEADER (same as store) ========== */
.store-header{position:sticky;top:0;z-index:30;background:#fff;display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding:24px clamp(24px,4vw,60px);border-bottom:1px solid rgba(10,13,22,.06);flex-wrap:wrap}
.store-header__logo img{height:24px;width:auto}
.store-header nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-left:clamp(24px,4vw,60px)}
.store-header nav a,.store-header nav .cat-nav-item{font-size:13.5px;font-weight:500;color:#5b6070;transition:color .25s ease,text-shadow .25s ease;text-decoration:none}
.store-header nav a:hover,.store-header nav .cat-nav-item:hover{color:#0e8c84}
/* text-shadow instead of font-weight change so activating an item doesn't
   widen it and shift neighbours. */
.store-header nav a.is-active,.store-header nav .cat-nav-item.is-active{color:#0e8c84;text-shadow:0.4px 0 0 currentColor,-0.4px 0 0 currentColor}
.store-search{flex:0 1 320px;min-width:200px;max-width:320px;display:flex;align-items:center;gap:8px;margin-left:auto}
.store-search__pill{flex:1;min-width:0;display:flex;align-items:center;height:38px;background:url('../img/ui/search_pill_bg.png') center/100% 100% no-repeat;padding:0 20px;transition:filter .2s ease}
.store-search__pill:focus-within{filter:brightness(.98)}
.store-search input{flex:1;background:transparent;border:0;outline:0;font:inherit;font-size:13.5px;color:#0a0d16;min-width:0}
.store-search__btn{width:38px;height:38px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;flex-shrink:0;transition:transform .25s ease;line-height:0}
.store-search__btn img{width:100%;height:100%;display:block}
.store-search__btn:hover{transform:scale(1.06)}
.header-icons{display:flex;gap:3px;align-items:center;margin-right:clamp(12px,2vw,32px)}
.header-icons a{display:flex;line-height:0;transition:transform .25s ease}
.header-icons a:hover{transform:translateY(-1px)}
.header-icons img{width:40px;height:40px;display:block}

/* ========== PRODUCT HERO ========== */
.product-body{max-width:1200px;margin:0 auto;padding:clamp(28px,3.5vw,48px) clamp(24px,6vw,110px)}
.product-hero{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media(min-width:900px){.product-hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,3.5vw,48px)}}

/* Left card */
.product-image-card{position:relative;aspect-ratio:1;background:#fff;border:1px solid rgba(10,13,22,.06);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;max-width:620px;margin:0 auto;width:100%;transition:border-color .4s ease,box-shadow .4s ease;cursor:zoom-in}
.product-image-card:hover{border-color:rgba(14,140,132,.25);box-shadow:0 20px 40px -20px rgba(10,13,22,.15)}
@media(min-width:900px){.product-image-card{position:sticky;top:100px;align-self:start}}
.product-image-card img.pi{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.product-image-card:hover img.pi{transform:scale(1.06)}
.product-formats{position:absolute;top:0;right:0;display:flex;gap:8px;padding:8px 12px;background:#fff;border:1px solid rgba(10,13,22,.09);border-top:0;border-right:0;border-radius:0 0 0 12px;z-index:2}
.product-formats img{width:34px;height:auto;display:block;transition:transform .25s ease}
.product-formats img:hover{transform:translateY(-2px)}
.product-watermark{position:absolute;bottom:0;left:0;display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid rgba(10,13,22,.09);border-bottom:0;border-left:0;border-radius:0 12px 0 0;z-index:2}
.product-watermark img{height:24px;width:auto;margin-left:4px}

/* Right details */
.product-details{display:flex;flex-direction:column;gap:0}
.product-title{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.02em;color:#0a0d16;margin-bottom:14px}
.product-subtitle{font-family:'AbarLow','Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(18px,2vw,24px);color:#0D121C;line-height:1.4;letter-spacing:-.01em;margin-bottom:18px;direction:rtl;text-align:right}
.product-designid{font-size:13px;color:#5b6070;margin-bottom:8px}
.product-designid strong{color:#0a0d16;font-weight:600;margin-left:4px}
.product-price-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.product-price{font-family:'Inter','AbarLow',system-ui,sans-serif;font-size:22px;font-weight:700;color:#0a0d16;letter-spacing:-.01em}
.product-price-old{font-size:15px;color:#9ca0aa;text-decoration:line-through;letter-spacing:-.005em;font-weight:500}
.product-price-old[hidden]{display:none}
.product-discount{background:#e93a4a;color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.product-discount[hidden]{display:none}
.product-digital{font-size:15px;color:#5b6070;font-weight:300;margin-left:auto}
.product-title__new{display:inline-block;vertical-align:middle;background:#e8f2fc;color:#09416F;font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:-.005em;margin-left:10px;position:relative;top:-2px}
.product-title__new[hidden]{display:none}
/* ---- Subscription download CTA (shown when user has active plan or owns file) ---- */
.sub-download{margin:0 0 20px;background:linear-gradient(135deg,#f7faf9,#fff);border:1px solid rgba(14,140,132,.18);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
/* The HTML [hidden] attribute needs an explicit override — otherwise the
   .sub-download{display:flex} rule above beats the UA [hidden]{display:none}
   at equal specificity and the box stays visible when JS sets hidden. */
.sub-download[hidden]{display:none}
.sub-download__btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#0e8c84;color:#fff;border:0;padding:12px 20px;border-radius:9px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .1s ease}
.sub-download__btn:hover{background:#0d7a72}
.sub-download__btn:active{transform:translateY(1px)}
.sub-download__btn:disabled{background:#c9ccd3;cursor:not-allowed}
.sub-download__note{font-size:12px;color:#5b6070;text-align:center;letter-spacing:-.005em}
.sub-download__note strong{color:#0a6b64;font-weight:700}

.product-cta{display:block;line-height:0;transition:transform .25s ease,filter .25s ease;margin-bottom:20px}
.product-cta[hidden]{display:none}
.product-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.product-cta img{width:100%;height:auto;display:block;border-radius:12px}

/* Desktop Checkout CTA — takes the place of Add to Cart when this product
   is already in cart. Dark background so it reads as "final action" and
   is visually distinct from the green Add flow. */
.product-checkout-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#0a0d16;color:#fff;padding:16px 24px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;font-family:inherit;letter-spacing:-.005em;margin-bottom:20px;transition:background .2s ease,transform .1s ease;box-shadow:0 4px 14px rgba(10,13,22,.14)}
.product-checkout-cta:hover{background:#1a1f2b;transform:translateY(-1px)}
.product-checkout-cta:active{transform:translateY(0)}
.product-checkout-cta[hidden]{display:none}
.product-checkout-cta__count{background:#e93a4a;color:#fff;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;min-width:20px;text-align:center;line-height:1.3;letter-spacing:-.005em}
.product-checkout-cta svg{flex-shrink:0}

/* Feature bullets */
.product-features{background:#fff;border:1px solid rgba(10,13,22,.09);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.feat{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#0a0d16;font-weight:400}
.feat img{width:20px;height:20px;flex-shrink:0}

/* Accordion */
.acc-list{display:flex;flex-direction:column;gap:10px}
.acc-item{background:#fff;border:1px solid rgba(10,13,22,.09);border-radius:12px;overflow:hidden}
.acc-item__head{width:100%;background:none;border:0;font:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 20px;font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:14px;color:#0a0d16;text-align:left;transition:background .25s ease}
.acc-item__head:hover{background:#fafafb}
.acc-item__label{flex:1}
.acc-item__chev{color:#0a0d16;opacity:.55;transition:transform .35s ease,opacity .25s ease;display:flex}
.acc-item[data-open="true"] .acc-item__chev{transform:rotate(180deg);opacity:.9}
.acc-item__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.65,.2,1),opacity .3s ease;opacity:0}
.acc-item[data-open="true"] .acc-item__wrap{grid-template-rows:1fr;opacity:1}
.acc-item__wrap>div{overflow:hidden;min-height:0}
.acc-item__body{padding:4px 20px 20px;color:#5b6070;font-size:13.5px;line-height:1.65;letter-spacing:-.005em}
.acc-item__body ul{padding-left:18px;margin-top:4px}
.acc-item__body li{margin-bottom:4px}
.acc-item__body a{color:#3079C2;text-decoration:underline}
.tag-list{display:flex;flex-wrap:wrap;gap:9px;padding-top:2px}
.tag-list span{background:#f4f4f7;border:1px solid rgba(10,13,22,.08);border-radius:8px;padding:6px 13px;font-size:12.5px;color:#0a0d16;font-weight:500;line-height:1.5}

/* ========== SIMILAR DESIGNS ========== */
.similar-section{background:#f5f5f7;padding:clamp(40px,5vw,72px) 0}
.similar-inner{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}
.section-title{font-family:'Inter','AbarLow',system-ui,sans-serif;font-weight:600;font-size:clamp(18px,1.9vw,24px);letter-spacing:-.02em;color:#0a0d16;margin-bottom:clamp(22px,2.4vw,32px)}
.similar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){.similar-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.similar-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.similar-card{display:flex;flex-direction:column;color:inherit;transition:transform .3s ease}
.similar-card:hover{transform:translateY(-3px)}
.similar-card__img{aspect-ratio:1;background:#fff;border:1px solid rgba(10,13,22,.06);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .3s ease,box-shadow .3s ease;flex:none}
.similar-card:hover .similar-card__img{border-color:rgba(20,172,172,.4);box-shadow:0 12px 28px rgba(10,13,22,.06)}
.similar-card__img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .5s ease}
.similar-card:hover .similar-card__img img{transform:scale(1.04)}
.similar-card__title{font-size:13px;font-weight:500;color:#0a0d16;margin:12px 2px 0;line-height:1.4}
.similar-card__price{font-size:16px;font-weight:700;color:#0a0d16;margin:8px 2px 0;margin-top:auto;padding-top:8px;letter-spacing:-.01em}

/* ========== RELATED COLLECTIONS ========== */
.related-section{background:#ffffff;padding:clamp(40px,5vw,72px) 0 clamp(50px,6vw,90px)}
.related-inner{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){.related-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.related-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.rel-card{display:flex;flex-direction:column;color:inherit;transition:transform .3s ease}
.rel-card:hover{transform:translateY(-3px)}
.rel-card__img{aspect-ratio:1;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;transition:box-shadow .3s ease;flex:none}
.rel-card:hover .rel-card__img{box-shadow:0 12px 28px rgba(10,13,22,.08)}
.rel-card__img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .5s ease}
.rel-card:hover .rel-card__img img{transform:scale(1.04)}
.rel-card__title{font-size:13px;font-weight:500;color:#0a0d16;margin:12px 2px 0;line-height:1.4}
.rel-card__price{font-size:16px;font-weight:700;color:#0a0d16;margin:8px 2px 0;margin-top:auto;padding-top:8px;letter-spacing:-.01em}
.bg-1{background:#f0ebe0}
.bg-2{background:#e6e2f1}
.bg-3{background:#e6ecf5}
.bg-4{background:#e6f0e9}
.bg-5{background:#f0f0e0}
.bg-6{background:#e6f0ec}
.bg-7{background:#f4ecec}
.bg-8{background:#e0eae6}

/* ========== FOOTER ========== */
.ft-icon{opacity:.7;transition:opacity .25s ease}
.ft-icon:hover{opacity:1}
.store-footer{background:#fff;border-top:1px solid rgba(10,13,22,.06)}
.store-footer__inner{max-width:1400px;margin:0 auto;padding:clamp(22px,2.4vw,32px) clamp(20px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ========== MOBILE MENU ========== */
.menu-btn{display:none;width:42px;height:42px;border:1px solid rgba(10,13,22,.08);border-radius:50%;background:#fff;align-items:center;justify-content:center;padding:0;cursor:pointer;flex-shrink:0;box-shadow:0 2px 6px rgba(10,13,22,.04);position:relative}
.menu-btn__lines{display:block;width:18px;height:1.6px;background:#0a0d16;position:relative;transition:transform .3s ease,opacity .3s ease}
.menu-btn__lines::before,.menu-btn__lines::after{content:'';position:absolute;left:0;width:100%;height:1.6px;background:#0a0d16;transition:transform .3s ease}
.menu-btn__lines::before{top:-6px}
.menu-btn__lines::after{top:6px}
.menu-btn.open .menu-btn__lines{background:transparent}
.menu-btn.open .menu-btn__lines::before{transform:rotate(45deg) translate(4px,4px)}
.menu-btn.open .menu-btn__lines::after{transform:rotate(-45deg) translate(4px,-4px)}
/* 100vh on a phone measures the viewport WITHOUT the browser's address bar,
   so a drawer sized to it runs past the bottom of the screen and anything
   anchored to its foot — the sign-in card — is cut off. 100dvh tracks the
   area actually visible; the 100vh line above stays as the fallback.
   The safe-area padding keeps it clear of the iPhone home indicator. */
.drawer{position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100vh;height:100dvh;background:#fff;z-index:100;padding:78px 24px calc(20px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:0;box-shadow:-16px 0 40px rgba(0,0,0,.12);transition:right .4s cubic-bezier(.22,.65,.2,1);overflow-y:auto}
.drawer.open{right:0}
.drawer a.drawer-link{padding:16px 8px;font-size:15.5px;font-weight:500;color:#5b6070;border-bottom:1px solid rgba(10,13,22,.06);transition:color .25s ease,padding-left .25s ease}
.drawer a.drawer-link.is-active{font-weight:600;color:#0a0d16}
.drawer a.drawer-link:hover{color:#0e8c84;padding-left:14px}
.drawer a.drawer-link--icon{display:flex;align-items:center;gap:12px}
.drawer-bg{position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:99;opacity:0;pointer-events:none;transition:opacity .4s ease}
.drawer-bg.open{opacity:1;pointer-events:auto}

@media(max-width:900px){
  .store-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:22px 20px}
  .store-footer__inner > div:first-child{display:none !important}
  .store-footer__inner > span{order:2;font-size:12px !important;letter-spacing:-.005em}
  .store-footer__inner > a{order:1;line-height:0}
  .store-footer__inner > a img{height:20px !important;width:auto;opacity:.85}
  .product-price-row{display:none}
  .product-designid{margin-bottom:18px}
}
@media(max-width:720px){
  /* Single row: logo | search | hamburger. `nowrap` guarantees the menu
     button can never fall to a second line; the search is the only flexible
     item, so it absorbs the leftover space. */
  .store-header{gap:10px;padding:16px 20px;flex-wrap:nowrap}
  .store-header nav,.header-icons{display:none}
  .store-header__logo{flex:none}
  .menu-btn{display:flex;flex:none;margin-left:auto}
  .store-search{flex:1 1 auto;min-width:0;gap:6px;margin-left:auto;max-width:none}
  .store-search__pill{height:38px;padding:0 16px}
  .store-search input{font-size:13px}
  .store-search__btn{width:38px;height:38px}
  body.drawer-open{overflow:hidden}
  .product-title{font-size:22px}
  .product-title__new{font-size:11px;padding:2px 8px;margin-left:6px;top:-3px}
  /* Both overlay chips shrink on phones: at desktop sizes they eat a real
     chunk of the (much smaller) product image and crowd its corners. */
  .product-formats img{width:24px}
  .product-formats{gap:5px;padding:5px 9px;top:0;right:0;border-radius:0 0 0 10px}
  .product-watermark{padding:5px 10px;gap:6px;border-radius:0 10px 0 0}
  .product-watermark img{height:17px;margin-left:2px}
}

/* ========== MOBILE STICKY BUY BAR ========== */
.mobile-buy-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;border-top:1px solid rgba(10,13,22,.09);box-shadow:0 -4px 20px rgba(10,13,22,.06);padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));align-items:center;justify-content:space-between;gap:10px}
@media(max-width:900px){
  .mobile-buy-bar{display:flex}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  .product-cta{display:none}
}
.mobile-buy-bar__price{display:flex;flex-direction:column;line-height:1.25;flex:none;white-space:nowrap}
.mobile-buy-bar__label{font-size:11px;color:#5b6070;font-weight:500}
.mobile-buy-bar__amount{font-size:16.5px;font-weight:700;color:#0a0d16;letter-spacing:-.015em;white-space:nowrap}
.mobile-buy-bar__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#0e8c84 0%,#0a746d 100%);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;box-shadow:0 4px 10px rgba(14,140,132,.25);transition:transform .2s ease,filter .2s ease;flex:none;white-space:nowrap}
.mobile-buy-bar__cta:hover,.mobile-buy-bar__cta:active{transform:translateY(-1px);filter:brightness(1.05)}
/* `hidden` is applied by the UA stylesheet, which any author `display` rule
   outranks — so display:inline-flex above quietly defeated mAdd.hidden=true
   and left Add to Cart sitting next to Checkout until the row overflowed. */
.mobile-buy-bar__cta[hidden]{display:none}
.mobile-buy-bar__cta svg{flex-shrink:0}
/* Secondary Checkout button — sits to the right of Add to Cart and only
   appears when the cart has items. Compact so it never crowds out the
   primary Add to Cart button which keeps its original design. */
.mobile-buy-bar__checkout{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#0a0d16;color:#fff;padding:12px 12px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s ease,transform .1s ease,padding .2s ease;flex:none;margin-left:0;letter-spacing:-.005em;white-space:nowrap}
.mobile-buy-bar__checkout:hover{background:#1a1f2b}
.mobile-buy-bar__checkout:active{transform:translateY(1px)}
.mobile-buy-bar__checkout[hidden]{display:none}
.mobile-buy-bar__checkout svg{flex-shrink:0;order:3}
.mobile-buy-bar__checkout [data-checkout-count]{background:#e93a4a;color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;min-width:16px;text-align:center;line-height:1.35;order:2}
/* Secondary state — text hidden, compact pill next to Add to Cart. */
.mobile-buy-bar__checkout-label{display:none;order:1}
/* Primary state — Add to Cart is hidden (product is already in cart) so
   Checkout takes its place, becomes full-size and shows the "Checkout"
   label alongside the count. */
.mobile-buy-bar__checkout.is-primary{padding:12px 20px;font-size:14px;gap:8px;margin-left:0;flex:none}
.mobile-buy-bar__checkout.is-primary .mobile-buy-bar__checkout-label{display:inline}
}