/* ============================================================ F. BINSABBAR storefront - COMMERCE views (owned by views-commerce.js) Bag / Wishlist / Account / Search-overlay + results. MONOCHROME only (no gold/champagne). Every "champagne" cue in the specs is translated to ink/grey here. Brand-library icons only. Reuses kit classes (.contain .crumb .fcount .ey .h2 .disp .lead .btn .lcta .plp-grid .pcard .reassure .band .reveal). New classes are namespaced (bag- / wish- / acct- / fbsearch-). RTL-safe via logical properties; the kit sets dir on + #site.ar. ============================================================ */ /* ---- shared: transactional page head (bag + wishlist) ---- */ .tx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,44px);} .tx-head .h2{text-transform:none;letter-spacing:.02em;} .tx-head .fcount{margin-top:8px;display:block;} .tx-empty{text-align:center;} .tx-empty .in{max-width:52ch;margin-inline:auto;} .tx-empty-ico{width:40px;height:40px;color:var(--grey);margin:0 auto 22px;} .tx-empty .h2{text-transform:none;letter-spacing:.02em;margin:6px 0 18px;} .tx-empty .lead{margin-bottom:30px;} .tx-empty-cta{display:flex;flex-direction:column;align-items:center;gap:18px;} /* ============ BAG ============ */ .bag-count-a11y{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .bag-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,420px);gap:clamp(34px,5vw,76px);align-items:start;padding-block:clamp(20px,4vw,52px);} .bag-main,.bag-items{min-width:0;} .bag-line{display:grid;grid-template-columns:clamp(120px,14vw,176px) minmax(0,1fr) auto;gap:clamp(20px,3vw,34px);padding-block:clamp(26px,3vw,38px);border-bottom:1px solid var(--hair);align-items:start;transition:opacity .35s var(--e1);} .bag-line:first-child{border-top:1px solid var(--hair);} .bag-line.removing{opacity:.25;} .bag-line .pv{aspect-ratio:3/4;background:var(--card-grad);overflow:hidden;} .bag-line .pv img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e1);} .bag-line .pv:hover img{transform:scale(1.025);} .bag-line .bl-info{display:flex;flex-direction:column;gap:7px;min-width:0;} .bl-ey{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);} .bl-name{font-size:var(--ty-label);letter-spacing:var(--ty-track);line-height:var(--ty-label-lh);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .bl-meta{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);} .bl-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px;} .bl-remove{min-width:44px;min-height:44px;display:inline-flex;align-items:center;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);position:relative;} .bl-remove:hover{color:var(--ink);} .bl-remove::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .15s var(--e1);} .bl-remove:hover::after{width:100%;} .bl-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:end;white-space:nowrap;} .bl-price{font-size:var(--ty-label);line-height:var(--ty-label-lh);font-variant-numeric:tabular-nums;} .bl-price.por{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--ink);} .bl-enquire{min-height:44px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);display:inline-flex;align-items:center;gap:7px;} .bl-enquire:hover{color:var(--ink);} .bl-enquire .ico{width:14px;height:14px;} /* bag quantity now uses the kit .stepper component (store.css) */ /* by-request grouping sub-head */ .bag-subhead{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:var(--grey);padding:30px 0 4px;} /* personalisation cards use live governed product imagery and local-only actions */ .bag-personal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(44px,7vw,80px);} .bag-personal-card{min-width:0;background:var(--paper);border:1px solid var(--hair);} .bag-personal-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--card-grad);} .bag-personal-image img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--e1);} .bag-personal-card:hover .bag-personal-image img{transform:translateY(-5px) scale(1.015);} .bag-personal-copy{min-height:174px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;} .bag-personal-copy .h3{font-weight:400;} .bag-personal-copy .lcta{margin-top:auto;text-align:start;} /* black order summary */ .bag-sum{position:static;background:var(--ink);color:var(--paper);padding:clamp(30px,4vw,46px);} .bag-sum .ey{display:block;margin-bottom:10px;color:rgba(255,255,255,.68);} .bag-sum-title{margin:0 0 22px;font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);font-weight:400;} .sum-row{display:flex;justify-content:space-between;gap:16px;padding-block:13px;font-size:var(--ty-label);line-height:var(--ty-label-lh);border-bottom:1px solid rgba(255,255,255,.2);} .sum-row .v{font-variant-numeric:tabular-nums;} .sum-total{display:flex;justify-content:space-between;gap:16px;padding-block:20px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} .sum-total .v{font-variant-numeric:tabular-nums;} .bag-sum .btn.block{margin-top:14px;background:var(--paper);color:var(--ink);border-color:var(--paper);} .bag-sum .btn.block:hover{opacity:1;background:rgba(255,255,255,.88);} .bag-signin,.bag-continue{width:fit-content;min-height:44px;margin:10px auto 0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);border-bottom:1px solid rgba(255,255,255,.48);} .bag-signin:hover,.bag-continue:hover{color:var(--paper);border-color:var(--paper);} /* The two owner-editable bottom links (bagbody block): stacked, centered, same treatment. */ .bag-links{display:flex;flex-direction:column;align-items:center;} .bag-sum .reassure{margin-top:18px;text-align:center;color:rgba(255,255,255,.64);} .bag-por-note{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);margin:16px 0 0;padding-top:16px;border-top:1px solid var(--hair-soft);} .bag-sum .bag-por-note{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.2);} .bag-services{margin:26px clamp(-46px,-4vw,-30px) clamp(-46px,-4vw,-30px);border-top:1px solid rgba(255,255,255,.22);} .bag-services a{min-height:58px;padding-inline:clamp(30px,4vw,46px);display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);transition:background .2s;} .bag-services a:last-child{border-bottom:0;} .bag-services a:hover,.bag-services a:focus-visible{background:rgba(255,255,255,.08);} .bag-services a>span{display:inline-flex;align-items:center;gap:12px;}.bag-services .ico{width:17px;height:17px;flex:none;} @media(max-width:900px){.bag-wrap{grid-template-columns:1fr;}.bag-sum{width:100%;}} @media(max-width:620px){ .bag-line{grid-template-columns:86px minmax(0,1fr);gap:16px;}.bag-line .bl-right{grid-column:2;align-items:flex-start;text-align:start;white-space:normal;}.bag-line .pv{grid-row:1/span 2;} .bag-personal{grid-template-columns:1fr;}.bag-personal-copy{min-height:150px;} } @media(prefers-reduced-motion:reduce){.bag-line .pv img,.bag-personal-image img{transition:none!important;transform:none!important;}} /* ============ WISHLIST ============ */ /* saved-state overrides on the reused product card */ #view .wish-grid .pcard .wish{opacity:1;color:var(--ink);} #view .wish-grid .pcard .wish .ico{fill:var(--ink);} .wish-signin{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);margin-top:30px;} .wish-signin .lcta{font-size:var(--ty-label);} /* ============ ACCOUNT ============ */ .acct{max-width:760px;margin-inline:auto;padding-block:clamp(40px,8vw,96px);} .acct-hero{text-align:center;max-width:52ch;margin-inline:auto;margin-bottom:clamp(32px,5vw,54px);} .acct-hero .ey{display:block;margin-bottom:14px;} .acct-hero .h2{text-transform:none;letter-spacing:.02em;margin-bottom:16px;} .acct-hero .lead{color:var(--ink-warm);} .acct-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);padding:10px 18px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);margin-bottom:22px;} .acct-chip .ico{width:16px;height:16px;} .acct-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);margin-top:12px;} @media(max-width:680px){.acct-paths{grid-template-columns:1fr;}} .acct-path{border:1px solid var(--hair);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--paper);} .acct-path .ey{margin:0;} .acct-path h3{font-family:var(--fdisp);font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);font-weight:400;letter-spacing:var(--ty-track);margin:0;} .acct-path p{font-size:var(--ty-compact);line-height:var(--ty-compact-lh);color:var(--grey);margin:0;flex:1;} .acct-path .btn{margin-top:4px;} .acct-portal{margin-top:clamp(34px,5vw,54px);border-top:1px solid var(--hair);padding-top:clamp(28px,4vw,42px);} .acct-portal .ey{display:block;margin-bottom:18px;text-align:center;} .acct-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair-soft);border:1px solid var(--hair-soft);} @media(max-width:680px){.acct-feats{grid-template-columns:1fr;}} .acct-feat{background:var(--paper);padding:24px 18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;} .acct-feat .ico{width:22px;height:22px;color:var(--ink);} .acct-feat h4{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);margin:0;font-weight:400;} .acct-feat p{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);margin:0;} .acct-note{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);text-align:center;margin-top:26px;} /* ============ SEARCH OVERLAY ============ */ .fbsearch-scrim{display:none;} .fbsearch{position:fixed;inset:0;z-index:80;height:100dvh;max-height:none;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);font-family:var(--fbody);letter-spacing:var(--ty-track);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-24px);transition:opacity .24s ease,transform .32s var(--e1),visibility 0s .32s;} .fbsearch.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .24s ease,transform .32s var(--e1),visibility 0s 0s;} .fbsearch-in{min-height:100%;display:flex;flex-direction:column;} .fbsearch-top{position:sticky;top:0;z-index:30;height:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--mx);background:rgba(255,255,255,.98);} .fbsearch-top>span{justify-self:start;width:48px;} .fbsearch-wordmark{display:block;width:clamp(194px,22vw,278px);height:auto;} .fbsearch-close{justify-self:end;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:none;border-radius:999px;transition:background .2s var(--e1);} .fbsearch-close:hover{background:var(--sand-l);} .fbsearch-close .ico{width:21px;height:21px;} .fbsearch-query{position:sticky;top:84px;z-index:28;padding:4px var(--mx) 24px;background:var(--paper);} .fbsearch-core{position:relative;max-width:980px;margin-inline:auto;} .fbsearch-field{height:56px;display:flex;align-items:center;gap:14px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);transition:box-shadow .18s var(--e1);} .fbsearch-field:focus-within{box-shadow:0 0 0 1px var(--ink);} .fbsearch-field>.ico{width:20px;height:20px;color:var(--ink);flex:none;} .fbsearch-field .inp{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} .fbsearch-field .inp:focus{box-shadow:none;outline:0;} .fbsearch-clear{min-width:48px;min-height:44px;font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);color:var(--grey);} .fbsearch-clear:hover{color:var(--ink);} .fbsearch-suggestions{position:absolute;z-index:40;top:64px;inset-inline:0;padding:10px 0;background:var(--paper);border:1px solid var(--hair-soft);box-shadow:0 22px 48px rgba(18,18,18,.12);} .fbsearch-suggestions[hidden]{display:none;} .fbsearch-term{min-height:50px;width:100%;display:flex;align-items:center;gap:12px;padding:10px 24px;text-align:start;font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--ink);} .fbsearch-term:hover,.fbsearch-term.on{background:var(--sand-l);color:var(--ink);} .fbsearch-term .ico{width:16px;height:16px;color:var(--grey);flex:none;} .fbsearch-term .rest{color:var(--grey);} .fbsearch-body{flex:1;margin:0;} .fbsearch-trending{min-height:64px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:8px var(--mx) 16px;} .fbsearch-trending>.ey{color:var(--grey);} .fbsearch-chips{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px;} .fbsearch-chip{min-height:44px;display:inline-flex;align-items:center;font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--ink);position:relative;} .fbsearch-chip::after{content:"";position:absolute;inset-inline-start:0;bottom:7px;width:0;height:1px;background:var(--ink);transition:width .15s var(--e1);} .fbsearch-chip:hover::after{width:100%;} .fbsearch-summary{max-width:var(--maxw);margin-inline:auto;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--mx);border-top:1px solid var(--hair-soft);font-size:var(--ty-label);line-height:var(--ty-label-lh);color:var(--grey);} .fbsearch-summary button{min-height:44px;color:var(--ink);border-bottom:1px solid currentColor;} .fbsearch-section{padding-bottom:clamp(40px,6vw,76px);} .fbsearch-section-head{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:var(--mx);border-top:1px solid var(--hair-soft);} .fbsearch-section-head h2{margin:0;font-family:var(--fdisp);font-size:var(--ty-body);line-height:var(--ty-body-lh);font-weight:400;letter-spacing:var(--ty-track);} .fbsearch-section-head span{font-size:var(--ty-help);line-height:var(--ty-help-lh);color:var(--grey);} .fbsearch-section .plp-grid{padding:0;} .fbsearch-rail{grid-auto-flow:column;grid-template-columns:none !important;grid-auto-columns:minmax(220px,25vw);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;scrollbar-width:none;} .fbsearch-rail::-webkit-scrollbar{display:none;} .fbsearch-rail>.pcard{scroll-snap-align:start;} .fbsearch-noresults{max-width:660px;margin:50px auto 90px;padding:0 var(--mx);text-align:center;} .fbsearch-noresults .ey{display:block;margin-bottom:14px;} .fbsearch-noresults h2{margin:0 0 14px;font-family:var(--fdisp);font-size:var(--ty-h-sm);line-height:var(--ty-h-sm-lh);font-weight:400;} .fbsearch-noresults p{margin:0 auto 26px;color:var(--grey);} .fbsearch-foot{min-height:76px;margin-top:auto;padding:14px var(--mx);display:flex;align-items:center;justify-content:center;gap:26px;border-top:1px solid var(--hair-soft);font-size:var(--ty-label);line-height:var(--ty-label-lh);} .fbsearch-foot span{color:var(--grey);} .fbsearch-foot a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);border-bottom:1px solid currentColor;} /* doorway tiles (empty state + no-results) */ .fbsearch-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(max-width:640px){.fbsearch-doors{grid-template-columns:1fr 1fr;}} .door{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;color:#fff;} .door .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 5s ease;} .door:hover .bg{transform:scale(1.05);} .door .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 58%);} .door .cap{position:relative;z-index:2;padding:16px;} .door .cap .nm{font-family:var(--fdisp);font-size:var(--ty-label);line-height:var(--ty-label-lh);letter-spacing:var(--ty-track);} .door .cap .ct{font-family:var(--fdisp);font-size:var(--ty-over);line-height:var(--ty-over-lh);letter-spacing:var(--ty-track-over);text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:4px;} @media(prefers-reduced-motion:reduce){.door:hover .bg{transform:none;}} /* AR/dir fixes for the sheet (it lives outside #site so inherit AR font here) */ [dir="rtl"] .fbsearch{font-family:var(--far);} [dir="rtl"] .fbsearch *{letter-spacing:0 !important;} [dir="rtl"] .fbsearch .fbsearch-field .inp{font-family:var(--far);} [dir="rtl"] .fbsearch .ico.flip{transform:scaleX(-1);} /* sheet is outside #site, so #site.ar .flip does not reach it */ @media(max-width:640px){ .fbsearch-top{height:70px;} .fbsearch-wordmark{width:172px;} .fbsearch-query{top:70px;padding-top:2px;padding-bottom:18px;} .fbsearch-field{height:52px;padding-inline:17px;} .fbsearch-field .inp{font-size:16px;} .fbsearch-suggestions{top:60px;} .fbsearch-term{padding-inline:18px;} .fbsearch-trending{justify-content:flex-start;gap:2px 18px;} .fbsearch-section-head{height:64px;} .fbsearch-rail{grid-auto-columns:62vw;} .fbsearch-foot{justify-content:flex-start;} } /* ============ SEARCH RESULTS PAGE ============ */ /* Idle #/search page: the field is a button that opens the real overlay (matches the editor sample). */ .sr-openfield{width:100%;cursor:text;background:transparent;} .sr-openfield .sr-openfield-ph{flex:1;min-width:0;text-align:start;font-family:var(--fdisp);font-size:var(--ty-h-sm);letter-spacing:var(--ty-track);color:var(--grey);} .sr-head{padding-block:clamp(36px,6vw,72px) clamp(20px,3vw,30px);} .sr-head .ey{display:block;margin-bottom:14px;} .sr-head .h2{text-transform:none;letter-spacing:.01em;} .sr-head .fcount{display:block;margin-top:12px;} .sr-grid{padding-block:clamp(24px,4vw,44px) clamp(48px,7vw,96px);} .sr-noresults{text-align:center;padding-block:clamp(28px,5vw,56px);} .sr-noresults .in{max-width:56ch;margin-inline:auto;} .sr-noresults .ey{display:block;margin-bottom:14px;} .sr-noresults .h2{text-transform:none;letter-spacing:.02em;margin-bottom:14px;} .sr-noresults .lead{margin-bottom:36px;} .sr-section{margin-top:clamp(40px,6vw,72px);} .sr-section>.ey{display:block;text-align:center;margin-bottom:22px;} .sr-nudge{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(36px,5vw,56px);}