/** Shopify CDN: Minification failed Line 330:0 Unexpected "}" Line 817:1 Expected "}" to go with "{" **/ /* ============================================================ Aurely London — theme styles Colours/type are driven by CSS vars set in header.liquid from theme settings, so they stay editable in the customizer. ============================================================ */ :root{ --black:#141414; --paper:#ffffff; --stone:#f2f1ef; --stone-2:#e8e6e2; --line:#e6e4e0; --line-2:#d7d4ce; --muted:#8a857e; --graphite:#3d3a36; --display:'Bodoni Moda', Georgia, 'Times New Roman', serif; --sans:'Manrope', system-ui, -apple-system, sans-serif; --maxw:1440px; --gutter:clamp(18px,4.5vw,60px); --img-filter: none; --btn-bg:#141414; --btn-text:#ffffff; } *{box-sizing:border-box} .aurely{color:var(--black);font-family:var(--sans);font-weight:300;line-height:1.65} .aurely img{display:block;max-width:100%} .aurely a{color:inherit;text-decoration:none} .aurely button{font-family:inherit;font-size:12px;cursor:pointer;border:none;background:none;color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:500} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .btn{display:inline-flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.16em; text-transform:uppercase;font-weight:500;padding:17px 42px;background:var(--btn-bg,#141414);color:var(--btn-text,#fff); border:1px solid var(--btn-bg,#141414);transition:opacity .3s,background .35s,color .35s} .btn:hover{opacity:.85} .btn--block{width:100%} .btn--light{background:#fff;color:var(--black);border-color:#fff} .btn--light:hover{background:transparent;color:#fff} .btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)} .btn--outline-light:hover{background:#fff;color:var(--black)} .btn[disabled]{opacity:.4;cursor:not-allowed} .txtlink{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500; border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .3s;display:inline-block} .txtlink:hover{opacity:.55} img.bw,.bw img{filter:var(--img-filter)} /* ---------- announcement ---------- */ .announce{background:var(--black);color:#fff;text-align:center;font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;padding:11px 16px;font-weight:400} /* ---------- header ---------- */ /* position:sticky was silently breaking (an ancestor somewhere has overflow or a transform, which kills sticky with no console error). Switched to position:fixed, which is immune to that — it's always anchored to the viewport regardless of what any parent element does. Controlled by the "Sticky header" theme setting via the `has-sticky-header` class on (set in theme.liquid). The announcement bar and .header are wrapped together in .header-group (see header.liquid) and fixed as ONE unit, so the announcement bar stays above the header instead of sliding below it. aurely.js measures the group's real height and sets --header-h + body padding-top so page content doesn't jump underneath it. */ .header-group{ width:100%; z-index:60 } body.has-sticky-header .header-group{ position:fixed; top:0; left:0; right:0 } body.has-sticky-header{ padding-top:var(--header-h, 0px) } .header{ background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) } .header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--gutter)} .header__l,.header__r{display:flex;align-items:center;gap:22px} .header__r{justify-content:flex-end} .hutil{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400} .hutil svg{width:16px;height:16px;stroke:var(--black);stroke-width:1.2;fill:none} .hutil:hover{opacity:.55} .bagn{font-size:9px;position:relative;top:-6px} .wordmark{font-family:var(--display);font-size:clamp(23px,3vw,33px);letter-spacing:.2em;font-weight:400;text-align:center;line-height:1} .wordmark small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.5em;font-weight:500;color:var(--muted);margin-top:5px;padding-left:.5em} .wordmark img{max-height:44px;width:auto;margin:0 auto} .nav{display:flex;justify-content:center;gap:clamp(16px,2.5vw,38px);padding:0 var(--gutter) 15px} .nav a{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);font-weight:400;position:relative;padding-bottom:4px} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--black);transition:right .35s} .nav a:hover::after{right:0} .burger{display:none;flex-direction:column;gap:5px;width:22px} .burger span{height:1.2px;background:var(--black);display:block} /* ---------- drawer (mobile menu) ---------- */ .drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,360px);background:#fff;z-index:120; transform:translateX(-100%);transition:transform .4s ease;padding:26px 26px 40px; display:flex;flex-direction:column;overflow-y:auto;box-shadow:20px 0 60px rgba(0,0,0,.12)} .drawer.open{transform:translateX(0)} .drawer__top{display:flex;justify-content:flex-end;align-items:center;margin-bottom:20px} .drawer__x{font-size:20px;line-height:1} .drawer__nav a{display:block;font-size:18px;letter-spacing:.03em;padding:13px 0;border-bottom:1px solid var(--line)} .drawer__utils{margin-top:22px;display:flex;flex-direction:column;gap:2px} .drawer__utils a{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 0;color:var(--graphite)} .drawer__utils svg{width:22px;height:22px;stroke:var(--black);stroke-width:1.1;fill:none} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:110;opacity:0;visibility:hidden;transition:.3s} .scrim.open{opacity:1;visibility:visible} /* ---------- generic image frame ---------- */ .ph{overflow:hidden;background:var(--stone);position:relative} .ph img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .ph--tall{aspect-ratio:4/5}.ph--port{aspect-ratio:3/4}.ph--sq{aspect-ratio:1/1} a:hover>.ph img,.card:hover .ph img{transform:scale(1.045)} /* ---------- section scaffolding ---------- */ .sec{padding:clamp(56px,8vw,112px) 0} .sec--tight{padding:clamp(40px,5vw,72px) 0} .head{text-align:center;margin-bottom:clamp(30px,4vw,54px)} .head h2{font-family:var(--sans);font-weight:200;font-size:clamp(26px,3.4vw,42px);letter-spacing:.02em;margin:12px 0 0} .head p{color:var(--muted);max-width:52ch;margin:12px auto 0;font-size:14.5px} .head--serif h2{font-family:var(--display);font-weight:400} /* ---------- hero ---------- */ .hero{position:relative;display:flex;align-items:flex-end;overflow:hidden} .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 35%,rgba(0,0,0,.55))} .hero__in{position:relative;z-index:2;color:#fff;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gutter) clamp(42px,6vw,80px)} .hero .eyebrow{color:rgba(255,255,255,.8)} .hero__h{font-family:var(--display);font-weight:400;font-size:clamp(38px,6.4vw,80px);line-height:1.05;margin:16px 0 22px;max-width:16ch} .hero__h em{font-style:italic} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} /* ---------- grids / cards ---------- */ .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,20px)} .cat__cap{text-align:center;margin-top:18px} .cat__cap .n{font-size:15px;letter-spacing:.06em} .cat__cap .g{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:7px} .card__meta{text-align:center;margin-top:16px} .card__cat{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .card__name{font-size:16px;letter-spacing:.02em;margin:8px 0 6px;font-weight:400} .card__price{font-size:13px;color:var(--graphite)} .card__price s{color:var(--muted);margin-right:6px} /* ---------- editorial split ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch} .split.reverse .ph{order:2} .split .ph{min-height:520px} .split__b{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,96px);background:var(--stone)} .split__b h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.12;margin:16px 0 20px;max-width:15ch} .split__b p{color:var(--graphite);max-width:44ch;margin-bottom:12px;font-size:14.5px} .split__b .txtlink{margin-top:20px;align-self:flex-start} /* ---------- banner (full-bleed dark) ---------- */ .band{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden} .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter) brightness(.72)} .band__in{position:relative;z-index:2;color:#fff;max-width:640px;padding:clamp(60px,9vw,120px) var(--gutter)} .band .eyebrow{color:rgba(255,255,255,.75)} .band h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,56px);margin:16px 0 22px;line-height:1.1} .band p{color:rgba(255,255,255,.85);margin:0 auto 30px;max-width:46ch;font-size:15px} /* ---------- social proof ---------- */ .stars{display:inline-flex;gap:3px;line-height:1} .stars svg{width:16px;height:16px} .stars .s-on{fill:var(--black);stroke:none} .stars .s-off{fill:none;stroke:var(--line-2)} .sp-summary{text-align:center;margin-bottom:clamp(26px,4vw,46px)} .sp-summary .stars svg{width:20px;height:20px} .sp-summary .r{font-size:14px;letter-spacing:.04em;margin-top:12px;color:var(--graphite)} .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px)} .sp-card{border:1px solid var(--line);padding:clamp(24px,3vw,38px);text-align:left} .sp-card .stars{margin-bottom:16px} .sp-card blockquote{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.45;font-style:italic;margin-bottom:18px} .sp-card .who{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ---------- services ---------- */ .svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px);text-align:center;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)} .svc svg{width:26px;height:26px;stroke:var(--black);stroke-width:1;fill:none;margin:0 auto 14px} .svc h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px} .svc p{font-size:12.5px;color:var(--muted);max-width:24ch;margin:0 auto} /* ---------- newsletter ---------- */ .news{text-align:center;border-top:1px solid var(--line)} .news h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);margin:12px 0 14px} .news p{color:var(--muted);max-width:42ch;margin:0 auto 28px;font-size:14.5px} .nform{display:flex;max-width:440px;margin:0 auto;border-bottom:1px solid var(--black)} .nform input{flex:1;border:none;background:none;padding:13px 2px;font-family:var(--sans);font-size:14px;outline:none;color:var(--black)} .nform button{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:0 4px 0 16px} .news small{display:block;margin-top:16px;color:var(--muted);font-size:11px} .news__note{margin-top:14px;font-size:12px;color:var(--graphite)} /* ---------- footer ---------- */ .footer{background:var(--black);color:#c9c6c0;padding:clamp(52px,7vw,84px) 0 34px} .ftop{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(26px,4vw,56px);padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.13)} .fbrand .wordmark{color:#fff;text-align:left} .fbrand .wordmark small{color:rgba(255,255,255,.5);text-align:left} .fbrand p{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55);max-width:32ch} .fcol h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:18px} .fcol a{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:11px;transition:color .3s} .fcol a:hover{color:#fff} .fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px} .fbot small{font-size:11px;color:rgba(255,255,255,.42)} .fsoc{display:flex;gap:18px} .fsoc a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)} .fsoc a:hover{color:#fff} /* ============================================================ PRODUCT PAGE ============================================================ */ .pdp{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,3.4vw,64px);align-items:start; padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(48px,7vw,96px)} /* gallery: DESKTOP = vertical stack of 1:1 squares */ /* DESKTOP gallery — editorial (mockup) by default: big hero + portrait pairs + wide shots */ .pgallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)} .pgallery__item{overflow:hidden;background:var(--stone)} .pgallery__item img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .pgallery__item:hover img{transform:scale(1.03)} .pgallery .g-full{grid-column:1/-1;aspect-ratio:4/3} .pgallery .g-half{aspect-ratio:3/4} .pgallery .g-tall{grid-column:1/-1;aspect-ratio:16/10} .pgallery .g-sq{aspect-ratio:1/1} /* uniform 1:1 option */ .pgallery--square{grid-template-columns:1fr} .pgallery--square .g-full,.pgallery--square .g-half,.pgallery--square .g-tall,.pgallery--square .g-sq{grid-column:auto;aspect-ratio:1/1} .pgallery__dots{display:none} .pgallery-wrap--sticky{position:sticky;top:150px;align-self:start} /* info */ .pinfo{position:sticky;top:150px} .pinfo.no-sticky{position:static} .pinfo h1{font-family:var(--sans);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:.01em;margin:0 0 16px} .pinfo .price{font-size:17px;font-weight:400;letter-spacing:.02em} .pinfo .price s{color:var(--muted);font-weight:300;margin-right:8px} .pinfo .price .save{color:var(--black);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-left:10px} .pinfo .tax{font-size:11px;color:var(--muted);margin:6px 0 0;letter-spacing:.04em} .pblock{margin-top:22px} .pblock:first-child{margin-top:0} .desc{font-size:14.5px;color:var(--graphite);max-width:46ch} .rule{height:1px;background:var(--line);margin:24px 0} .optlab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px} .optlab .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase} .optlab .v{font-size:13px;color:var(--muted)} .pills{display:flex;flex-wrap:wrap;gap:8px} .pills+.pills{margin-top:18px} .pill{position:relative} .pill input{position:absolute;opacity:0;inset:0;cursor:pointer} .pill span{display:inline-flex;padding:11px 20px;border:1px solid var(--line-2);font-size:12px;letter-spacing:.06em;background:#fff;transition:all .25s} .pill input:checked+span{border-color:var(--black);background:var(--black);color:#fff} .pill:hover span{border-color:var(--black)} .buy{display:flex;gap:12px;margin-top:22px} .qty{display:flex;align-items:center;border:1px solid var(--black);min-width:116px} .qty button{width:40px;height:100%;font-size:16px} .qty input{width:36px;text-align:center;border:none;font-family:var(--sans);font-size:14px;outline:none;background:none;color:var(--black)} .buy .btn{flex:1} .wish{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px;margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)} .wish svg{width:16px;height:16px;stroke:var(--black);stroke-width:1.3;fill:none} .wish:hover{opacity:.6} .trust{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.5} .trust svg{width:17px;height:17px;stroke:var(--black);stroke-width:1.2;fill:none;flex:none;margin-top:2px} .p-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .p-social .r{font-size:12.5px;color:var(--graphite);letter-spacing:.02em} .p-social blockquote{width:100%;font-family:var(--display);font-style:italic;font-size:15px;color:var(--graphite);margin-top:8px} .acc{border-top:1px solid var(--line);margin-top:6px} .acc__i{border-bottom:1px solid var(--line)} .acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-align:left;font-weight:500} .acc__s{font-size:17px;font-weight:200;transition:transform .3s} .acc__i.open .acc__s{transform:rotate(45deg)} .acc__b{max-height:0;overflow:hidden;transition:max-height .4s ease} .acc__in{padding:0 0 24px;font-size:14px;color:var(--graphite);line-height:1.75} .acc__in ul{padding-left:18px} .acc__i.open .acc__b{max-height:800px} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .grid4{grid-template-columns:repeat(2,1fr);gap:18px} .sp-grid{grid-template-columns:1fr;gap:14px} .svcs{grid-template-columns:repeat(2,1fr);row-gap:36px} .ftop{grid-template-columns:1fr 1fr} } @media(max-width:900px){ .pdp{grid-template-columns:1fr;gap:26px} .pinfo{position:static} .pgallery-wrap--sticky{position:static} /* gallery: MOBILE = single 1:1 image, swipeable, full-bleed */ .pgallery{grid-template-columns:none;display:flex;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;gap:0;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none} .pgallery::-webkit-scrollbar{display:none} .pgallery__item,.pgallery .g-full,.pgallery .g-half,.pgallery .g-tall,.pgallery .g-sq{flex:0 0 100%;scroll-snap-align:center;grid-column:auto;aspect-ratio:1/1} .pgallery__dots{display:flex;justify-content:center;gap:7px;margin-top:14px} .pgallery__dots button{width:7px;height:7px;border-radius:50%;background:var(--line-2);padding:0} .pgallery__dots button[aria-current="true"]{background:var(--black)} } @media(max-width:768px){ .nav{display:none} .header__bar{grid-template-columns:auto 1fr auto;padding:13px var(--gutter)} .header__l,.header__r{gap:14px} .burger{display:flex} .hutil .lbl{display:none} .split{grid-template-columns:1fr} .split.reverse .ph{order:0} .split .ph{min-height:420px} .ftop{grid-template-columns:1fr;gap:30px} /* remove account + wishlist icons on mobile */ .hutil--account, .hutil--wish{display:none} /* true-center the logo regardless of left/right content width */ .wordmark{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; } .split{grid-template-columns:1fr} .split.reverse .ph{order:0} .split .ph{min-height:420px} .ftop{grid-template-columns:1fr;gap:30px} } } @media(max-width:520px){ .grid4{grid-template-columns:1fr 1fr;gap:12px} } /* consecutive accordion blocks share one hairline */ .acc + .acc{margin-top:0} .acc + .acc .acc__i{border-top:0} .pgallery-wrap{min-width:0} /* ============================================================ Additional page templates ============================================================ */ .pagehead{text-align:center;padding:clamp(40px,6vw,84px) 0 clamp(20px,3vw,34px)} .pagehead .eyebrow{display:block;margin-bottom:14px} .pagehead h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,54px);line-height:1.08} .pagehead p{color:var(--muted);max-width:52ch;margin:16px auto 0;font-size:14.5px} .crumbs{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:20px 0 0} .crumbs a:hover{color:var(--black)} .crumbs i{font-style:normal;margin:0 8px;opacity:.5} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 26px;border-bottom:1px solid var(--line);margin-bottom:34px;flex-wrap:wrap} .toolbar .count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .toolbar select{font-family:var(--sans);font-size:12px;letter-spacing:.06em;border:1px solid var(--line-2);background:#fff;padding:9px 30px 9px 14px;color:var(--black); -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141414' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center} .pagination{display:flex;justify-content:center;gap:6px;margin-top:clamp(40px,5vw,64px)} .pagination a,.pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;border:1px solid var(--line);color:var(--graphite)} .pagination .current{border-color:var(--black);color:var(--black)} .pagination a:hover{border-color:var(--black)} .empty{text-align:center;padding:clamp(50px,8vw,110px) 0} .empty p{color:var(--muted);margin-bottom:26px;font-size:15px} /* prose (page / article) */ .prose{max-width:720px;margin:0 auto;font-size:16px;line-height:1.8;color:var(--graphite);padding-bottom:clamp(50px,7vw,90px)} .prose h2{font-family:var(--display);font-weight:400;color:var(--black);font-size:clamp(24px,3vw,34px);margin:1.8em 0 .5em;line-height:1.2} .prose h3{font-weight:500;color:var(--black);font-size:20px;margin:1.6em 0 .4em} .prose p{margin:0 0 1.1em} .prose a{border-bottom:1px solid var(--line-2)} .prose a:hover{border-color:var(--black)} .prose img{margin:1.6em auto} .prose ul,.prose ol{margin:0 0 1.1em 1.2em} .prose blockquote{border-left:2px solid var(--black);padding-left:22px;margin:1.4em 0;font-family:var(--display);font-style:italic;font-size:20px;color:var(--black)} /* blog */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px)} .post .ph{aspect-ratio:4/3;margin-bottom:18px} .post .meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .post h3{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25;margin-bottom:10px} .post p{font-size:14px;color:var(--muted)} .article-hero{aspect-ratio:16/7;margin-bottom:clamp(28px,4vw,48px)} /* cart */ .cart{padding:clamp(20px,3vw,40px) 0 clamp(50px,7vw,90px)} .cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)} .cart-row .ph{aspect-ratio:1;width:96px} .cart-row .t{font-size:15px;margin-bottom:4px} .cart-row .v{font-size:12px;color:var(--muted);letter-spacing:.04em} .cart-row .rm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-2);margin-top:8px;display:inline-block} .cart-row .rm:hover{color:var(--black);border-color:var(--black)} .cart-row .r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px} .cart-foot{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px;padding-top:34px} .cart-foot .note textarea{width:min(420px,90vw);border:1px solid var(--line-2);padding:12px;font-family:var(--sans);font-size:14px;min-height:88px} .cart-foot .sum{margin-left:auto;text-align:right;min-width:260px} .cart-foot .sum .st{display:flex;justify-content:space-between;font-size:16px;margin-bottom:6px} .cart-foot .sum small{color:var(--muted);font-size:12px;display:block;margin-bottom:18px} /* account / auth forms */ .authwrap{max-width:440px;margin:0 auto;padding:clamp(20px,3vw,30px) 0 clamp(60px,8vw,100px)} .acctwrap{max-width:960px;margin:0 auto;padding-bottom:clamp(60px,8vw,100px)} .field{margin-bottom:16px;text-align:left} .field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:7px} .field input,.field textarea,.field select{width:100%;border:1px solid var(--line-2);background:#fff;padding:13px 14px;font-family:var(--sans);font-size:14px;color:var(--black);outline:none} .field input:focus{border-color:var(--black)} .formnote{font-size:13px;color:var(--muted);margin:14px 0} .formnote a{border-bottom:1px solid var(--line-2)} .errors{border:1px solid var(--black);padding:14px 16px;margin-bottom:20px;font-size:13px} .datatable{width:100%;border-collapse:collapse;font-size:13.5px} .datatable th{text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)} .datatable td{padding:14px;border-bottom:1px solid var(--line)} @media(max-width:1024px){ .blog-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .blog-grid{grid-template-columns:1fr} .cart-row{grid-template-columns:72px 1fr;grid-auto-rows:auto} .cart-row .ph{width:72px} .cart-row .r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center} .cart-foot .sum{margin-left:0;width:100%;text-align:left} .cart-foot .sum .st{font-size:18px} } /* ========================================================== CART DRAWER ========================================================== */ .hutil--bag, .drawer__cart-button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .drawer__cart-button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; } .drawer__cart-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; } .cart-drawer { position: fixed; inset: 0; z-index: 9999; visibility: hidden; pointer-events: none; } .cart-drawer[open], .cart-drawer.is-open { visibility: visible; pointer-events: auto; } .cart-drawer__overlay { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; cursor: pointer; transition: opacity 0.3s ease; } .cart-drawer[open] .cart-drawer__overlay, .cart-drawer.is-open .cart-drawer__overlay { opacity: 1; } .cart-drawer__panel { position: absolute; top: 0; right: 0; width: min(480px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--paper, #ffffff); color: var(--black, #141414); transform: translateX(100%); transition: transform 0.35s ease; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08); } .cart-drawer[open] .cart-drawer__panel, .cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); } .cart-drawer__header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; border-bottom: 1px solid rgba(20, 20, 20, 0.14); } .cart-drawer__header h2 { margin: 0; font-family: "Bodoni Moda", serif; font-size: 28px; font-weight: 400; } .cart-drawer__close { appearance: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; } .cart-drawer__content { min-height: 0; flex: 1; display: flex; flex-direction: column; } .cart-drawer__items { flex: 1; overflow-y: auto; padding: 0 28px; } .cart-drawer__item { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(20, 20, 20, 0.12); } .cart-drawer__image { display: block; background: #f2f1ef; } .cart-drawer__image img, .cart-drawer__image svg { width: 100%; height: 132px; display: block; object-fit: cover; } .cart-drawer__image img { filter: var(--img-filter, grayscale(1) contrast(1.04)); } .cart-drawer__details { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .cart-drawer__item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cart-drawer__title { color: inherit; font-size: 14px; line-height: 1.4; text-decoration: none; } .cart-drawer__variant { margin-top: 5px; font-size: 12px; opacity: 0.62; } .cart-drawer__remove { appearance: none; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 10px; text-transform: uppercase; cursor: pointer; opacity: 0.6; } .cart-drawer__item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; } .cart-drawer__quantity { height: 38px; display: grid; grid-template-columns: 36px 34px 36px; align-items: center; border: 1px solid rgba(20, 20, 20, 0.35); } .cart-drawer__quantity button { height: 100%; padding: 0; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; } .cart-drawer__quantity span { text-align: center; font-size: 12px; } .cart-drawer__price { font-size: 13px; } .cart-drawer__footer { padding: 24px 28px 28px; border-top: 1px solid rgba(20, 20, 20, 0.14); background: var(--paper, #ffffff); } .cart-drawer__subtotal { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 15px; } .cart-drawer__subtotal strong { font-weight: 500; } .cart-drawer__tax { margin: 9px 0 20px; font-size: 11px; opacity: 0.6; } .cart-drawer__checkout, .cart-drawer__continue { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 14px 22px; border: 1px solid #141414; background: #141414; color: #ffffff !important; /* hardcoded, var override se bachne ke liye */ font: inherit; font-size: 12px; letter-spacing: 0.1em; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .cart-drawer__checkout:hover, .cart-drawer__continue:hover { background: transparent; color: #141414 !important; } .cart-drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 28px; text-align: center; } .cart-drawer__empty p { margin: 0; font-family: "Bodoni Moda", serif; font-size: 25px; } .cart-drawer__continue { max-width: 280px; } .cart-drawer.is-loading .cart-drawer__content { pointer-events: none; opacity: 0.55; } body.cart-drawer-open { overflow: hidden; } @media screen and (max-width: 749px) { .cart-drawer__panel { width: 100%; } .cart-drawer__header { min-height: 70px; padding: 17px 20px; } .cart-drawer__header h2 { font-size: 24px; } .cart-drawer__items { padding: 0 20px; } .cart-drawer__item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 20px 0; } .cart-drawer__image img, .cart-drawer__image svg { height: 112px; } .cart-drawer__footer { padding: 20px; } .cart-drawer__quantity { grid-template-columns: 31px 28px 31px; } } /* Header utility alignment */ .header__r { display: flex; align-items: center; justify-content: flex-end; gap: 24px; } /* Wishlist icon */ .hutil--wish { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; color: var(--black, #141414); text-decoration: none; } .hutil--wish svg { display: block; width: 16px; height: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease, fill 0.2s ease; } .hutil--wish:hover svg { transform: scale(1.08); } /* Prevent utility elements from inheriting unwanted spacing */ .header__r .hutil { margin: 0; } #shopify-section-template--31835567194461__main { padding-bottom: 80px; .buy { flex-direction: column !important; width: 100% !important; } .buy .btn, .buy button[type="submit"] { width: 100% !important; flex: none !important; }