/* Navigation refinements */
.shop-trigger{font-family:inherit!important;font-size:12px!important;font-weight:400!important;letter-spacing:.04em!important;line-height:1.5!important}
.shop-trigger span{display:none!important}
.account-auth-actions{display:flex;gap:12px;margin-top:32px}.account-auth-content{max-width:620px;margin:0 auto}.account-auth-form{border:1px solid var(--line);padding:35px 30px}.account-auth-form .account-fields{grid-template-columns:1fr 1fr}.account-auth-form .account-fields .field-group:last-child:nth-child(odd){grid-column:span 2}.account-auth-form .button{margin-top:18px}.account-form-message{min-height:18px;color:var(--burgundy);font-size:11px;margin:18px 0 0}.account-auth-switch{color:var(--muted);font-size:12px;text-align:center;margin:18px 0 0}.account-auth-switch button{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);padding:0;cursor:pointer}.account-auth-content .account-heading{margin-bottom:48px}
.account-page-shell{max-width:1440px;margin:auto;padding:70px 4.5% 120px}.account-heading{padding:20px 0 48px;border-bottom:1px solid var(--line);margin-bottom:48px}.account-heading h1{font:600 clamp(58px,7vw,92px)/.8 var(--serif);letter-spacing:-.05em;margin:0}.account-heading>p:last-child{color:var(--muted);max-width:430px;margin:25px 0 0}.account-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:9%;align-items:start}.account-actions{display:grid;gap:15px;position:sticky;top:25px}.account-actions a,.account-actions button{border:0;border-bottom:1px solid transparent;background:none;color:var(--ink);font-size:11px;letter-spacing:.12em;text-align:left;text-transform:uppercase;padding:0 0 5px;cursor:pointer}.account-actions a:hover,.account-actions button:hover,.account-edit-trigger:hover{color:var(--burgundy)}.account-content{display:grid;gap:45px}.account-panel{padding-bottom:45px;border-bottom:1px solid var(--line)}.account-panel-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:27px}.account-panel h2{font:600 43px/.85 var(--serif);margin:0}.account-edit-trigger{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:0 0 3px;cursor:pointer}.account-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.account-fields .field-group input{height:46px}.account-fields .field-group input[readonly]{background:var(--cream);color:var(--muted)}.account-save-profile{margin-top:20px}.account-empty-state{border:1px solid var(--line);padding:42px 30px}.account-empty-state h3{font:500 37px/.9 var(--serif);margin:0 0 14px}.account-empty-state p,.account-wishlist-panel>p{color:var(--muted);margin:0 0 24px}.account-address-form{padding:25px 0 0}.account-address-form>.account-fields{grid-template-columns:1fr}.account-fields-split{grid-template-columns:1fr 1fr!important;margin-bottom:20px}.account-address-form .button{margin-top:20px}
.wishlist-page-shell{max-width:1440px;margin:auto;padding:26px 4.5% 120px}.wishlist-page-shell>.breadcrumbs{margin-bottom:14px}.wishlist-page-shell .wishlist-section{max-width:none;margin:auto;padding:0;border-top:0}
.wishlist-count{position:absolute;top:-8px;right:-7px;background:var(--burgundy);color:white;border-radius:50%;font-size:9px;width:15px;height:15px;display:grid;place-items:center}.product-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.product-title-row h1{flex:1}.product-wishlist-heart{position:static;flex:none;margin-top:8px}.wishlist-section{max-width:1440px;margin:auto;padding:105px 4.5% 120px;border-top:1px solid var(--line)}.wishlist-heading{display:block;margin-bottom:26px}.wishlist-heading h2{font:500 clamp(58px,8vw,100px)/.8 var(--serif);letter-spacing:-.05em;margin:0}.wishlist-heading>p:last-child{max-width:440px;color:var(--muted);line-height:1.7;margin:25px 0 0}.wishlist-grid{grid-template-columns:repeat(4,1fr)}.wishlist-card .product-info{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}.wishlist-card .product-info h3{width:100%}.wishlist-add,.wishlist-remove{border:0;background:none;color:var(--burgundy);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:0;cursor:pointer}.wishlist-remove{color:var(--muted);border-bottom:1px solid var(--line)}.wishlist-empty{border:1px solid var(--line);padding:70px 30px;text-align:center}.wishlist-empty h3{font:500 52px/.9 var(--serif);margin:0 0 18px}.wishlist-empty p:not(.eyebrow){color:var(--muted);margin:0 auto 28px;max-width:350px}
.shop-dropdown{top:100%!important;transform:translateY(0)!important}
.shop-menu:hover .shop-dropdown,.shop-menu.is-open .shop-dropdown{opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
.category-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:30px}.product-count{margin:0;color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}.category-toolbar label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.category-toolbar select{appearance:none;border:0;border-bottom:1px solid var(--burgundy);border-radius:0;background:transparent;color:var(--ink);padding:5px 22px 5px 0;font-size:11px;letter-spacing:.03em;cursor:pointer;outline:0}.category-products .product-card{cursor:pointer;transition:transform var(--hover-fade) var(--hover-ease)}.category-products .product-card:hover{transform:translateY(-5px)}.category-products .product-image{transition:filter var(--hover-fade) var(--hover-ease)}.category-products .product-card:hover .product-image{filter:saturate(1.08)}
@media(min-width:801px) and (max-width:1100px){.category-products{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:800px){.category-toolbar{align-items:flex-start;gap:18px;flex-direction:column;margin-bottom:24px}.category-toolbar label{width:100%;justify-content:space-between}.category-toolbar select{flex:1;min-width:170px}.category-products .product-card:hover{transform:none}}
.product-page-shell{max-width:1440px;margin:auto;padding:32px 4.5% 120px}.product-breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:48px}.product-breadcrumbs span{color:var(--muted)}.product-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.8fr);gap:8%;align-items:start}.product-main-image{aspect-ratio:4/5;background-position:center;background-size:cover}.product-thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.product-thumbnail{padding:0;border:1px solid transparent;background:none;cursor:pointer}.product-thumbnail.is-active{border-color:var(--burgundy)}.product-thumbnail span{display:block;aspect-ratio:1;background-size:cover}.product-summary{padding:25px 0}.product-summary h1{font:500 clamp(56px,6vw,84px)/.78 var(--serif);letter-spacing:-.05em;margin:0 0 25px}.product-price{font:14px var(--sans);color:var(--burgundy);margin:0 0 27px}.product-description{color:var(--muted);line-height:1.8;max-width:410px;margin:0 0 38px}.product-option{border-top:1px solid var(--line);padding:20px 0}.option-heading{display:flex;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.14em}.option-heading a{color:var(--burgundy);border-bottom:1px solid var(--burgundy);padding-bottom:2px}.size-options{display:flex;gap:8px;margin-top:16px}.size-option{width:42px;height:38px;border:1px solid var(--line);background:var(--white);font-size:11px;cursor:pointer}.size-option.is-selected,.size-option:hover{border-color:var(--burgundy);color:var(--burgundy)}.quantity-option{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:10px;letter-spacing:.14em}.quantity-control{display:flex;border:1px solid var(--line)}.quantity-control button{width:32px;border:0;background:var(--cream);cursor:pointer}.quantity-control input{width:36px;text-align:center;border:0;background:var(--white);outline:0;font-size:12px}.quantity-control input::-webkit-inner-spin-button{appearance:none}.product-actions{display:grid;gap:10px;margin-top:10px}.button-outline{border:1px solid var(--burgundy);background:transparent;color:var(--burgundy);justify-content:space-between}.product-note{font-size:10px;color:var(--muted);margin-top:20px}.product-accordions{margin:100px auto 0;border-top:1px solid var(--line);max-width:850px}.product-accordions details,.faq-accordions details{border-bottom:1px solid var(--line);padding:22px 0}.product-accordions summary,.faq-accordions summary{cursor:pointer;list-style:none;font:500 26px var(--serif);color:var(--ink)}.product-accordions summary::-webkit-details-marker,.faq-accordions summary::-webkit-details-marker{display:none}.product-accordions summary:after,.faq-accordions summary:after{content:'+';float:right;font:22px var(--sans);color:var(--burgundy)}.product-accordions details[open] summary:after,.faq-accordions details[open] summary:after{content:'−'}.product-accordions p,.faq-accordions p{max-width:650px;color:var(--muted);line-height:1.8;margin:18px 0 0}.related-products{margin-top:115px}.related-products .section-heading{margin-bottom:32px}.related-products h2{font:500 clamp(44px,5vw,64px)/.85 var(--serif);margin:0;letter-spacing:-.04em}.related-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.product-page-shell{padding:24px 6% 80px}.product-breadcrumbs{font-size:9px;margin-bottom:35px}.product-layout{display:flex;flex-direction:column;gap:15px}.product-gallery{width:100%}.product-summary{padding:20px 0 0}.product-summary h1{font-size:64px}.product-accordions{margin-top:70px}.product-accordions summary,.faq-accordions summary{font-size:24px}.related-products{margin-top:80px}.related-grid{grid-template-columns:repeat(2,1fr);gap:25px 12px}}
.product-page-shell .product-summary h1{font-weight:600}.product-page-shell .product-price{font-weight:600}.product-page-shell .product-description,.product-page-shell .product-note,.product-page-shell .product-accordions p{font-weight:400}.product-page-shell .option-heading>span,.product-page-shell .quantity-option>span{font-weight:600;color:var(--ink)}.size-chart-trigger{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 0;cursor:pointer}.product-page-shell .size-option{font-weight:600}.product-page-shell .button{font-weight:600;letter-spacing:.1em}.product-page-shell .related-products h2,.product-page-shell .product-accordions summary{font-weight:600}.product-page-shell .product-breadcrumbs{font-weight:500}.modal-open{overflow:hidden}.size-chart-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(39,35,35,.5)}.size-chart-modal[hidden]{display:none}.size-chart-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--white);padding:42px 42px 36px;box-shadow:0 20px 60px rgba(39,35,35,.2)}.size-chart-dialog .sg-table-block{margin-top:0}.size-chart-dialog img{display:block;width:100%;height:auto}.size-chart-close{position:absolute;top:13px;right:16px;border:0;background:none;color:var(--burgundy);font-size:28px;line-height:1;cursor:pointer}
@media(max-width:800px){.size-chart-dialog{padding:38px 18px 20px}.size-chart-close{top:10px;right:12px}}
.cart-page-shell{max-width:1440px;margin:auto;padding:30px 4.5% 120px}.cart-heading{padding:20px 0 18px;border-bottom:1px solid var(--line);margin-bottom:30px}.cart-heading .breadcrumbs{display:flex;gap:10px;align-items:center;margin-bottom:0}.cart-heading h1,.cart-empty h1{font:600 clamp(58px,7vw,92px)/.8 var(--serif);letter-spacing:-.05em;margin:0}.cart-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:8%;align-items:start}.cart-items-heading{display:flex;justify-content:space-between;padding:0 0 15px;border-bottom:1px solid var(--ink);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}.cart-items-heading span:last-child{color:var(--muted)}.cart-item{display:grid;grid-template-columns:130px minmax(150px,1fr) auto auto;gap:22px;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}.cart-item-image{display:block;aspect-ratio:3/4;background-size:cover;background-position:center}.cart-item-name{font:600 25px/.9 var(--serif);color:var(--ink)}.cart-item-meta{font-size:11px;color:var(--muted);margin:10px 0 17px}.cart-item-meta span{padding:0 5px;color:var(--burgundy)}.cart-remove{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);padding:0 0 3px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.cart-item-quantity>span,.cart-item-price>span{display:block;color:var(--muted);font-size:9px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px}.cart-item-quantity .quantity-control{width:max-content}.cart-item-price{text-align:right;min-width:85px}.cart-item-price strong{font-size:13px;font-weight:600}.order-summary{background:var(--cream);padding:35px 30px;position:sticky;top:25px}.order-summary h2{font:600 43px/.85 var(--serif);margin:0 0 34px}.summary-row,.summary-total{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}.summary-row strong,.summary-total strong{font-weight:600}.summary-muted{color:var(--muted);font-size:11px;text-align:right}.summary-total{border-bottom:0;padding:24px 0;font-size:14px}.summary-total strong{font-size:18px;color:var(--burgundy)}.checkout-button{width:100%;justify-content:space-between;border:0;cursor:pointer}.continue-link{display:block;text-align:center;color:var(--burgundy);font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-top:20px}.cart-empty{text-align:center;max-width:560px;margin:70px auto 110px}.cart-empty h1{margin-bottom:24px}.cart-empty>p:not(.eyebrow){color:var(--muted);line-height:1.8;margin:0 auto 30px;max-width:360px}
@media(max-width:1100px){.cart-item{grid-template-columns:105px minmax(130px,1fr) auto}.cart-item-price{grid-column:2;text-align:left}.cart-item-quantity{grid-column:3;grid-row:1 / span 2}.cart-item-main{align-self:start}}
@media(max-width:800px){.cart-page-shell{padding:22px 6% 80px}.cart-heading{padding:12px 0 14px;margin-bottom:24px}.cart-heading h1{font-size:64px}.cart-layout{display:flex;flex-direction:column;gap:55px}.cart-items,.order-summary{width:100%}.cart-item{grid-template-columns:90px minmax(0,1fr);gap:14px;padding:20px 0}.cart-item-image{grid-row:span 2}.cart-item-name{font-size:23px}.cart-item-quantity{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:12px}.cart-item-quantity>span{margin:0}.cart-item-price{grid-column:2;grid-row:3;text-align:left;margin-top:8px}.cart-item-price>span{display:inline;margin-right:8px}.cart-item-price strong{font-size:13px}.cart-remove{font-size:9px}.order-summary{position:static;padding:28px 22px}.order-summary h2{font-size:38px}.cart-empty{margin:45px auto 70px}.cart-empty h1{font-size:58px}}
@media(max-width:800px){.cart-item .quantity-control button{width:42px;height:42px}.cart-item .quantity-control input{height:42px;width:44px}}
.order-summary .checkout-button{justify-content:center}
.checkout-page-shell{max-width:1440px;margin:auto;padding:30px 4.5% 120px}.checkout-heading{padding:16px 0 0;border-bottom:0;margin-bottom:22px}.checkout-heading .breadcrumbs{display:flex;align-items:center;gap:10px;margin-bottom:0}.checkout-heading h1{font:600 clamp(58px,7vw,92px)/.8 var(--serif);letter-spacing:-.05em;margin:0}.checkout-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:9%;align-items:start}.checkout-form{min-width:0}.checkout-section{padding:0 0 42px;margin-bottom:42px;border-bottom:1px solid var(--line)}.checkout-section-heading{display:flex;align-items:baseline;gap:17px;margin-bottom:27px}.checkout-section-heading>span{color:var(--burgundy);font-size:10px;letter-spacing:.12em;font-weight:600}.checkout-section-heading h2{font:600 40px/.85 var(--serif);margin:0}.checkout-fields{display:grid;gap:20px}.two-fields{grid-template-columns:1fr 1fr}.three-fields{grid-template-columns:repeat(3,1fr);margin-top:0}.field-group label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:8px}.field-group label span{color:var(--burgundy)}.field-group label small{font-size:9px;letter-spacing:.05em;text-transform:none;color:var(--muted);font-weight:400}.field-group input{display:block;width:100%;height:46px;border:1px solid var(--line);background:var(--white);padding:0 13px;color:var(--ink);outline:0;transition:border-color .2s}.field-group input:focus{border-color:var(--burgundy)}.field-group input.is-invalid{border-color:var(--burgundy);background:#fff8f7}.field-error{min-height:15px;color:var(--burgundy);font-size:10px;margin:5px 0 0}.payment-button{width:100%;justify-content:center;border:0;cursor:pointer;margin-top:0}.checkout-order-summary{background:var(--cream);padding:32px 30px;position:sticky;top:25px}.checkout-order-summary h2{font:600 42px/.85 var(--serif);margin:0 0 30px}.checkout-summary-items{border-top:1px solid var(--line)}.checkout-summary-item{display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.checkout-summary-image{display:block;aspect-ratio:3/4;background-size:cover;background-position:center}.checkout-summary-name{font:600 20px/.9 var(--serif)}.checkout-summary-item p{font-size:10px;color:var(--muted);margin:8px 0 0}.checkout-summary-item p span{padding:0 4px;color:var(--burgundy)}.checkout-summary-item>strong{font-size:12px;font-weight:600}.checkout-summary-line,.checkout-summary-total{display:flex;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);font-size:12px}.checkout-summary-line strong,.checkout-summary-total strong{font-weight:600}.checkout-summary-line .summary-muted{color:var(--muted);font-size:10px;text-align:right}.checkout-summary-total{border-bottom:0;padding-top:23px;font-size:14px}.checkout-summary-total strong{font-size:18px;color:var(--burgundy)}
@media(max-width:800px){.checkout-page-shell{padding:22px 6% 80px}.checkout-heading{padding:10px 0 0;margin-bottom:18px}.checkout-heading h1{font-size:64px}.checkout-layout{display:flex;flex-direction:column;gap:45px}.checkout-order-summary{order:2;position:static;width:100%;padding:27px 22px}.checkout-form{order:1;width:100%}.checkout-section{padding-bottom:32px;margin-bottom:32px}.checkout-section-heading h2{font-size:34px}.two-fields,.three-fields{grid-template-columns:1fr;gap:17px}.three-fields{margin-top:0}.field-group input{height:49px}.payment-button{height:50px}.checkout-summary-name{font-size:19px}}
.checkout-signin-prompt{display:flex;align-items:center;gap:16px;padding:18px 0;margin:-20px 0 40px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.checkout-signin-trigger{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);padding:2px 0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.checkout-login-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(39,35,35,.5)}.checkout-login-modal[hidden]{display:none}.checkout-login-dialog{position:relative;width:min(440px,100%);background:var(--white);padding:44px 42px 38px;box-shadow:0 20px 60px rgba(39,35,35,.2)}.checkout-login-dialog h2{font:600 52px/.85 var(--serif);margin:0 0 28px}.checkout-login-close{position:absolute;top:13px;right:16px;border:0;background:none;color:var(--burgundy);font-size:28px;line-height:1;cursor:pointer}.login-form{display:grid;gap:14px}.login-form .field-group input{height:46px}.login-error{min-height:15px;color:var(--burgundy);font-size:10px;margin:5px 0 0}.login-submit{width:100%;justify-content:center;border:0;cursor:pointer;margin-top:5px}.login-link,.login-create{font-size:11px;text-align:center}.login-link{color:var(--burgundy);margin-top:3px}.login-create{color:var(--muted);margin:8px 0 0}.login-create a{color:var(--burgundy);border-bottom:1px solid var(--burgundy)}
.account-switch{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);padding:0;font:inherit;cursor:pointer}
@media(max-width:800px){.checkout-signin-prompt{margin:-10px 0 32px;justify-content:space-between}.checkout-login-dialog{padding:40px 22px 28px}.checkout-login-dialog h2{font-size:44px}}
/* Tamira storefront */
/* =====================================================================
Tamira type system - Cormorant Garamond + DM Sans
---------------------------------------------------------------------
--display Cormorant Garamond page/section headings, display
typography, italic accent lines.
--body DM Sans navigation, product names, prices,
forms, tables, buttons, footer, supporting text.
--wordmark Cormorant Garamond, on its own token. The Tamira logo is an
, so the .logo/.footer-logo rules below are inert -
keeping them on a separate token keeps it that way for good.
Both families are free (SIL Open Font License) and are loaded from
Google Fonts by the in each page's ; nothing is
self-hosted, so there is no @font-face here.
===================================================================== */
:root{--burgundy:#800020;--deep-burgundy:#4e0d1e;--ink:#272323;--muted:#766b6a;--cream:#f6f1eb;--blush:#e7d4cd;--line:#d9cec8;--white:#fffdfb;--display:'Cormorant Garamond',Georgia,serif;--body:'DM Sans',Arial,sans-serif;--serif:var(--display);--sans:var(--body);--wordmark:'Cormorant Garamond',Georgia,serif;--category-zoom:1.04;--category-zoom-fade:1s;--category-zoom-ease:cubic-bezier(.33,0,.2,1);--hover-fade:900ms;--hover-ease:cubic-bezier(.45,.05,.25,1);--hover-zoom:1.03}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:5}.nav-wrap{height:82px;max-width:1440px;margin:auto;padding:0 4.5%;display:flex;align-items:center;gap:60px}.logo{font:600 43px/.7 var(--serif);letter-spacing:-.03em;color:var(--burgundy)}.main-nav{display:flex;align-items:center;gap:34px;margin-right:auto}.main-nav a,.nav-actions button{font-size:12px;letter-spacing:.04em}.main-nav a{transition:color .2s}.main-nav a:hover,.text-link:hover,.footer-links a:hover{color:var(--burgundy)}.nav-actions{display:flex;gap:18px;align-items:center}.icon-button{position:relative;display:grid;place-items:center;background:none;border:0;padding:3px;color:var(--ink);cursor:pointer}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.bag-count{position:absolute;top:-8px;right:-7px;background:var(--burgundy);color:white;border-radius:50%;font-size:9px;width:15px;height:15px;display:grid;place-items:center}.menu-toggle{display:none;background:none;border:0}.hero{height:min(720px,calc(100vh - 125px));min-height:570px;position:relative;background:#ceb8ae;overflow:hidden}.image-placeholder{background-color:#d6c0b8;background-size:cover;background-position:center}.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(57,23,28,.3),rgba(57,23,28,.03)),url('https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=1800&q=85');background-position:center 35%}.hero-content{position:absolute;left:10%;top:50%;transform:translateY(-43%);color:white;max-width:480px}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 17px;color:var(--burgundy)}.hero .eyebrow{color:#f4dbd6}.hero h1{font:500 clamp(60px,8vw,116px)/.82 var(--serif);letter-spacing:-.04em;margin:0 0 30px}.hero h1 em,h2 em{font-style:italic;font-weight:400}.hero-copy{font-size:15px;max-width:270px;line-height:1.7;margin-bottom:29px}.button{display:inline-flex;align-items:center;gap:30px;padding:14px 19px;text-transform:uppercase;letter-spacing:.13em;font-size:10px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-light{background:white;color:var(--burgundy)}.button-dark{background:var(--burgundy);color:white}.button span{font-size:17px;line-height:0}.hero-scroll{position:absolute;right:5%;bottom:30px;color:white;text-transform:uppercase;font-size:9px;letter-spacing:.15em;writing-mode:vertical-rl;display:flex;gap:12px;align-items:center}.section{max-width:1440px;margin:auto;padding:105px 4.5% 120px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.section-heading h2,.category-heading h2{font:500 clamp(43px,5vw,64px)/.85 var(--serif);margin:0;letter-spacing:-.035em}.text-link{font-size:10px;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--burgundy);padding-bottom:5px;color:var(--burgundy)}.text-link span{font-size:16px;margin-left:15px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-image{aspect-ratio:3/4;display:block;position:relative;overflow:hidden}.product-image:before,.category-card:before,.social-image:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 40%);transition:transform .5s}.product-image:hover:before,.category-card:hover:before{transform:scale(1.06)}.product-tag{position:absolute;top:14px;left:14px;background:var(--white);color:var(--burgundy);padding:6px 9px;font-size:9px;text-transform:uppercase;letter-spacing:.11em}.heart{position:absolute;top:11px;right:12px;border:0;background:#fffdfbcc;border-radius:50%;width:31px;height:31px;padding:0;display:grid;place-items:center;line-height:0;color:var(--burgundy);cursor:pointer}.heart svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.heart.is-liked svg{fill:currentColor}.heart.is-liked{background:var(--burgundy);color:white}.product-info{display:flex;justify-content:space-between;gap:10px;padding:13px 1px}.product-info h3,.product-info p{margin:0;font-size:12px;font-weight:500}.product-info p{color:var(--muted)}.category-band{background:var(--cream);padding:105px 4.5% 120px}.category-heading,.category-grid{max-width:1310px;margin-left:auto;margin-right:auto}.category-heading{margin-bottom:38px}.category-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}.category-card{min-height:440px;display:flex;align-items:end;justify-content:space-between;padding:25px;position:relative;overflow:hidden;color:white;font:500 35px/.9 var(--serif);background-position:center;background-size:cover}.category-card b{font:normal 24px var(--sans)}.category-dresses{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?auto=format&fit=crop&w=900&q=80')}.category-tops{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('https://images.unsplash.com/photo-1564257577054-9e9b8f3e2d35?auto=format&fit=crop&w=800&q=80')}.category-sets{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=800&q=80')}.feature-section{max-width:1440px;margin:auto;padding:120px 4.5%;display:grid;grid-template-columns:1.35fr 1fr;gap:9%;align-items:center}.feature-image{aspect-ratio:1.07;background-image:url('https://images.unsplash.com/photo-1485968579580-b6d095142e6e?auto=format&fit=crop&w=1200&q=85');background-position:center}.feature-copy{max-width:380px}.feature-copy h2,.story-copy h2{font:500 clamp(60px,7vw,94px)/.75 var(--serif);letter-spacing:-.05em;margin:0 0 35px}.feature-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow){color:var(--muted);line-height:1.8;max-width:310px;margin-bottom:28px}.story-section{background:var(--blush);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;min-height:440px;padding:65px 9%}.story-copy{max-width:590px}.story-copy h2{font-size:clamp(52px,6vw,83px);margin-bottom:30px}.social-section{padding:110px 4.5% 120px;max-width:1440px;margin:auto}.social-heading{text-align:center;margin-bottom:40px}.social-heading h2{font:500 49px/.8 var(--serif);margin:0}.social-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.social-image{aspect-ratio:1;display:block;position:relative;overflow:hidden}.social-one{background-image:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=600&q=80')}.social-two{background-image:url('https://images.unsplash.com/photo-1485230895905-ec40ba36b9bc?auto=format&fit=crop&w=600&q=80')}.social-three{background-image:url('https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=600&q=80')}.social-four{background-image:url('https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=600&q=80')}.social-five{background-image:url('https://images.unsplash.com/photo-1485230895905-ec40ba36b9bc?auto=format&fit=crop&w=600&q=80')}.site-footer{background:var(--deep-burgundy);color:#f7e9e3;padding:72px 7% 25px}.footer-top{display:flex;align-items:start;justify-content:space-between;padding-bottom:70px;border-bottom:1px solid #895064}.footer-logo{color:#fff;font-size:57px}.footer-top p{font:italic 25px/1.1 var(--serif);margin:0 0 0 8%;color:#dcb7bf}.newsletter{width:280px}.newsletter label{display:block;font:italic 23px var(--serif);margin-bottom:15px}.newsletter div{display:flex;border-bottom:1px solid #dcb7bf}.newsletter input{background:none;border:0;padding:10px 0;color:white;min-width:0;flex:1;outline:0}.newsletter input::placeholder{color:#caaab0}.newsletter button{background:none;color:white;border:0;font-size:20px;cursor:pointer}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:55px 0 70px}.footer-links h3{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:#dcb7bf;margin:0 0 18px}.footer-links a{display:block;font:17px/1.7 var(--serif);color:#fff}.footer-bottom{border-top:1px solid #895064;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;color:#dcb7bf}.footer-bottom a{text-transform:uppercase;color:white}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:white;padding:12px 20px;font-size:12px;z-index:10;transition:transform .3s}.toast.show{transform:translate(-50%,0)}
@media(max-width:800px){.nav-wrap{height:69px;padding:0 6%;justify-content:space-between;gap:18px}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:7px 0;width:22px}.menu-toggle span{height:1px;background:var(--ink);width:20px}.logo{font-size:38px}.main-nav{position:absolute;display:none;top:69px;left:0;right:0;padding:20px 6%;background:var(--white);border-bottom:1px solid var(--line);flex-direction:column;align-items:start;gap:18px}.main-nav.is-open{display:flex}.nav-actions{gap:10px}.nav-actions [data-action="Account"],.nav-actions [data-action="Wishlist"]{display:none}.main-nav .nav-mobile-only{display:block}.hero{height:620px;min-height:0}.hero-image{background-position:62% center}.hero-content{left:8%;top:53%;max-width:80%}.hero h1{font-size:70px}.hero-scroll{display:none}.section{padding:75px 6% 85px}.product-grid{grid-template-columns:repeat(2,1fr);gap:25px 12px}.product-info{display:block}.product-info p{margin-top:3px}.category-band{padding:75px 6% 85px}.category-grid{grid-template-columns:1fr 1fr;gap:10px}.category-card{min-height:285px;padding:16px;font-size:28px}.category-card:first-child{grid-column:span 2;min-height:390px}.feature-section{padding:80px 6%;display:flex;flex-direction:column;gap:50px;align-items:start}.feature-image{width:100%;aspect-ratio:1}.feature-copy h2{font-size:78px}.story-section{grid-template-columns:1fr;padding:75px 8%;min-height:0}.social-section{padding:75px 6% 80px}.social-grid{grid-template-columns:repeat(3,1fr);gap:5px}.social-image:nth-child(4),.social-image:nth-child(5){display:none}.site-footer{padding:55px 8% 22px}.footer-top{display:block;padding-bottom:45px}.footer-top p{margin:25px 0 40px}.newsletter{width:100%}.footer-links{grid-template-columns:1fr 1fr;gap:40px 20px;padding:45px 0 50px}.footer-bottom{display:grid;grid-template-columns:1fr 1fr}.footer-bottom a{grid-column:span 2}.footer-links a{font-size:16px}}
@media(max-width:800px){.wishlist-section{padding:75px 6% 85px}.wishlist-heading{display:block;margin-bottom:30px}.wishlist-heading h2{font-size:64px;margin:8px 0 18px}.wishlist-heading>p:last-child{max-width:620px}.wishlist-grid{grid-template-columns:repeat(2,1fr);gap:25px 12px}.wishlist-empty{padding:50px 20px}.wishlist-empty h3{font-size:42px}.product-title-row h1{font-size:58px}.product-wishlist-heart{margin-top:4px}}
@media(max-width:800px){.account-page-shell{padding:45px 6% 80px}.account-heading{padding:12px 0 38px;margin-bottom:35px}.account-heading h1{font-size:64px}.account-layout{display:flex;flex-direction:column;gap:45px}.account-actions{position:static;display:flex;flex-wrap:wrap;gap:14px 22px;width:100%;padding-bottom:25px;border-bottom:1px solid var(--line)}.account-actions a,.account-actions button{font-size:9px}.account-content{width:100%;gap:32px}.account-panel{padding-bottom:32px}.account-panel-heading{align-items:start}.account-panel h2{font-size:36px}.account-fields{grid-template-columns:1fr;gap:17px}.account-empty-state{padding:32px 22px}.account-empty-state h3{font-size:32px}.account-fields-split{grid-template-columns:1fr 1fr!important}}
@media(max-width:800px){.account-auth-actions{flex-direction:column;align-items:stretch}.account-auth-form{padding:28px 20px}.account-auth-form .account-fields{grid-template-columns:1fr}.account-auth-form .account-fields .field-group:last-child:nth-child(odd){grid-column:auto}.account-auth-content .account-heading{margin-bottom:35px}}
@media(min-width:801px) and (max-width:1100px){.nav-wrap{gap:30px}.main-nav{gap:18px}.hero h1{font-size:90px}.story-section{padding-left:5%;padding-right:5%}}
/* Shared multi-page storefront rules */
.nav-wrap{position:relative;justify-content:space-between}.logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1}.main-nav{margin-right:0}.shop-menu{position:relative}.shop-trigger{background:none;border:0;padding:0;color:inherit;cursor:pointer}.shop-trigger span{font-size:13px;margin-left:4px}.shop-dropdown{position:absolute;top:31px;left:-18px;width:175px;padding:14px 0;background:var(--white);border:1px solid var(--line);box-shadow:0 12px 30px rgba(39,35,35,.08);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}.shop-menu:hover .shop-dropdown,.shop-menu.is-open .shop-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}.shop-dropdown a{display:block;padding:8px 18px;font-size:12px;white-space:nowrap}.shop-dropdown a:hover{background:var(--cream);color:var(--burgundy)}.category-page{padding:26px 4.5% 120px;max-width:1440px;margin:auto}.page-intro{padding:30px 0 55px;border-bottom:1px solid var(--line);margin-bottom:45px}.category-page .page-intro{padding-bottom:34px;margin-bottom:26px}.breadcrumbs{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:28px}.breadcrumbs a{color:var(--burgundy)}.page-intro h1{font:500 clamp(58px,8vw,100px)/.8 var(--serif);letter-spacing:-.05em;margin:0}.page-intro p{max-width:440px;color:var(--muted);line-height:1.7;margin:25px 0 0}.category-products{grid-template-columns:repeat(4,1fr)}.category-products .product-image{aspect-ratio:3/4}.category-products .product-card{min-width:0}.category-note{font:italic 22px var(--serif);color:var(--burgundy);margin:0 0 30px}.product-placeholder{min-height:60vh;display:grid;place-items:center;text-align:center;padding:50px}.product-placeholder h1{font:500 72px/.8 var(--serif);margin:0 0 20px}.product-placeholder p{color:var(--muted)}
@media(max-width:800px){.nav-wrap{justify-content:space-between}.logo{position:absolute;left:50%;transform:translateX(-50%)}.main-nav{margin-right:0}.shop-menu{width:100%}.shop-trigger{font-size:12px}.shop-dropdown{position:static;width:100%;display:none;box-shadow:none;border:0;border-top:1px solid var(--line);margin-top:14px;padding:8px 0 0}.shop-menu.is-open .shop-dropdown{display:block;opacity:1;transform:none;pointer-events:auto}.shop-dropdown a{padding:7px 0 7px 15px}.category-page{padding:18px 6% 80px}.page-intro{padding:20px 0 40px;margin-bottom:35px}.category-page .page-intro{padding-bottom:26px;margin-bottom:20px}.category-products{grid-template-columns:repeat(2,1fr);gap:25px 12px}.category-products .product-info{display:block}.product-placeholder h1{font-size:58px}}
/* Homepage image integration */
.hero-image{background-image:linear-gradient(90deg,rgba(57,23,28,.3),rgba(57,23,28,.03)),url('images/header/tamira-header.PNG')}.category-kurtis{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('images/santhipoma/01.PNG')}.category-salwar{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('images/sivappu-roja/01.jpg')}.category-dresses{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('images/red-apple-kannam/01.jpg')}.category-tops{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('images/malarey/01.jpg')}.category-sets{background-image:linear-gradient(0deg,rgba(41,16,21,.45),transparent 60%),url('images/green-co-ord-set/01.png')}
/* Homepage visual refinements */
.home-page{background:var(--cream)}.home-page .eyebrow{font-size:11px}.home-page .section-heading h2,.home-page .category-heading h2{font-size:clamp(46px,5vw,68px)}.home-page .social-heading h2{font-size:52px}.home-page .hero-content{left:clamp(8%,10vw,14%);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:22px}.home-page .hero-content .eyebrow,.home-page .hero-content h1,.home-page .hero-copy{margin:0}.home-page .arrivals{padding-top:72px}
@media(max-width:800px){.home-page .hero-content{left:8%;top:50%;max-width:84%;gap:18px}.home-page .arrivals{padding-top:55px}.home-page .social-heading h2{font-size:52px}}
/* Homepage arrivals refinement */
.home-page .arrivals{padding-bottom:64px}.home-page .category-band{padding-top:82px}
@media(max-width:800px){.home-page .arrivals{padding-bottom:55px}.home-page .category-band{padding-top:65px}}
/* Homepage best seller refinement */
.home-page .category-band{padding-bottom:72px}.home-page .best-sellers{padding-top:82px}.collection-empty{grid-column:1/-1;border:1px solid var(--line);padding:58px 30px;text-align:center}.collection-empty h2{font:500 46px/.9 var(--serif);margin:0 0 16px}.collection-empty p:not(.eyebrow){color:var(--muted);max-width:350px;margin:0 auto 26px}
@media(max-width:800px){.home-page .category-band{padding-bottom:55px}.home-page .best-sellers{padding-top:65px}.collection-empty{padding:42px 20px}.collection-empty h2{font-size:38px}}
/* Shared count-adaptive product grid: New Arrivals + Best Sellers (homepage and best-sellers.html) */
.product-grid-adaptive{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.product-grid-adaptive .product-card:only-child{width:100%;max-width:646px;justify-self:center}.product-grid-adaptive:has(.collection-empty){display:block}
@media(max-width:800px){.product-grid-adaptive{grid-template-columns:repeat(2,1fr)}}
/* Homepage section rhythm. Target: the ink-to-ink gap between sections matches the hero -> New Arrivals
reference (72px desktop / 55px mobile). Values are net of trailing space the content already carries:
.product-info adds 13px below the last card, .category-card adds 25px (16px mobile) below its label.
clamp() scales the rhythm continuously instead of snapping at one breakpoint. */
.home-page .arrivals{padding-bottom:clamp(20px,2.1vw,30px)}.home-page .category-band{padding-top:clamp(24px,2.4vw,34px);padding-bottom:clamp(18px,1.8vw,26px)}.home-page .best-sellers{padding-top:clamp(22px,1.9vw,28px);padding-bottom:80px}
@media(max-width:800px){.home-page .best-sellers{padding-bottom:60px}}
/* Follow Along: heading-only after the Instagram grid was removed.
Zero the grid's trailing margin and bring the band into the homepage rhythm. */
.home-page .social-section{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(52px,5.6vw,80px)}.home-page .social-heading{margin-bottom:0}
/* Footer: only the wordmark remains in .footer-top after the tagline and newsletter were removed.
The bare .logo{position:absolute} rule (intended for the header nav) would collapse .footer-top to
zero height and let the wordmark overlap the links, so put it back in normal flow and centre it. */
.site-footer .footer-logo{position:static;transform:none}.site-footer .footer-top{justify-content:center;text-align:center;padding-bottom:clamp(30px,3.4vw,48px)}
/* About Us: founder story beside the lotus artwork. Two columns; the shared
.story-copy>p max-width:310px rule is overridden so the long story reads properly. */
.story-section{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;padding-top:clamp(52px,5.5vw,76px);padding-bottom:clamp(52px,5.5vw,76px);padding-right:0;overflow:hidden}.story-copy{max-width:660px}.story-copy>p:not(.eyebrow){max-width:none;margin-bottom:19px}.story-copy>p:last-child{margin-bottom:0}.story-image{display:flex;justify-content:flex-end;align-items:flex-end;align-self:stretch}.story-image img{display:block;width:100%;height:auto;max-width:600px;margin-bottom:calc(-1 * clamp(52px,5.5vw,76px))}
@media(max-width:800px){.story-section{grid-template-columns:1fr;gap:26px;padding-right:8%;overflow:visible}.story-image{order:-1;justify-content:center;align-items:center;align-self:auto}.story-image img{max-width:250px;margin-bottom:0}}
/* Delivery & Return policy page. Reuses .page-intro/.breadcrumbs from the category pages;
type scale and colours come from the existing tokens, no new fonts. */
.policy-page,.size-guide-page,.contact-page{max-width:1440px;margin:auto;padding:26px 4.5% 120px}.policy-page .page-intro p{max-width:620px}.policy-content{max-width:760px}.policy-section{border-top:1px solid var(--line);margin-top:clamp(40px,4.5vw,62px);padding-top:clamp(38px,4vw,54px)}.policy-section:first-child{border-top:0;margin-top:0;padding-top:0}.policy-content h2{font:500 clamp(34px,4vw,50px)/.95 var(--serif);letter-spacing:-.03em;color:var(--ink);margin:0 0 24px}.policy-content h3{font:500 23px/1.35 var(--serif);color:var(--burgundy);margin:32px 0 12px}.policy-content h2+h3{margin-top:0}.policy-content p{color:var(--muted);line-height:1.85;margin:0 0 16px}.policy-content p:last-child{margin-bottom:0}.policy-content strong{color:var(--ink);font-weight:600}.policy-content ul{list-style:none;padding:0;margin:0 0 18px}.policy-content li{position:relative;padding-left:24px;color:var(--muted);line-height:1.85;margin-bottom:9px}.policy-content li:last-child{margin-bottom:0}.policy-content li:before{content:'';position:absolute;left:5px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--burgundy)}
@media(max-width:800px){.policy-page,.size-guide-page,.contact-page{padding:18px 6% 80px}.policy-content h3{font-size:21px;margin-top:28px}.policy-section{margin-top:36px;padding-top:32px}}
/* Size guide page: the model on the left with the size chart panel overlapping her from the right,
the whole composition centred. Chart sits on an opaque panel so the overlap reads as intentional. */
.sg-statement{text-align:center;max-width:760px;margin:clamp(16px,2.6vw,34px) auto 0}.sg-statement h2{font:500 clamp(29px,3.3vw,44px)/1.14 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-wrap:balance}.sg-statement p{font:italic clamp(15px,1.5vw,19px)/1.6 var(--serif);color:var(--burgundy);margin:0;text-wrap:balance}.sg-hero{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;margin-top:clamp(30px,4.4vw,64px)}.sg-col-model{position:relative;z-index:1;width:clamp(190px,30vw,400px)}.sg-model-img{display:block;width:100%;height:auto}.sg-col-chart{position:relative;z-index:2;width:clamp(320px,46vw,620px);margin-left:calc(-1 * clamp(22px,3.6vw,58px));background:var(--white);padding:clamp(22px,2.8vw,38px);box-shadow:0 22px 55px rgba(39,35,35,.13)}.sg-col-chart .sg-table-block{margin-top:0}.sg-table-block{margin-top:clamp(54px,7vw,98px);text-align:center}.sg-table-heading{font:500 clamp(20px,2.2vw,28px)/1.2 var(--serif);text-transform:uppercase;letter-spacing:.16em;color:var(--burgundy);margin:0 0 clamp(18px,2.4vw,28px)}.sg-table-wrap{overflow-x:auto;max-width:880px;margin-inline:auto}.sg-table{width:100%;border-collapse:collapse}.sg-table thead th{background:var(--burgundy);color:var(--white);font:600 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.18em;padding:16px 18px;text-align:left;white-space:nowrap}.sg-table tbody th,.sg-table tbody td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}.sg-table tbody th{font:500 17px/1 var(--serif);color:var(--ink);white-space:nowrap}.sg-table tbody td{font:14px var(--sans);color:var(--muted)}.sg-table tbody tr:nth-child(odd) th,.sg-table tbody tr:nth-child(odd) td{background:var(--cream)}.sg-table tbody tr:last-child th,.sg-table tbody tr:last-child td{border-bottom:0}
@media(max-width:900px){.sg-hero{display:block;max-width:520px;margin-left:auto;margin-right:auto}.sg-col-model{width:min(58%,230px);margin:0 auto}.sg-col-chart{width:100%;margin:calc(-1 * clamp(14px,4vw,30px)) auto 0}}
@media(max-width:800px){.sg-table thead th{padding:13px 12px;letter-spacing:.12em}.sg-table tbody th,.sg-table tbody td{padding:13px 12px}}
@media(max-width:800px){.size-chart-trigger{position:relative}.size-chart-trigger:after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}}
/* Contact page copy. Existing tokens only. */
.contact-copy{max-width:620px}.contact-copy h2{font:500 clamp(32px,3.6vw,46px)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0 0 26px}.contact-copy p{color:var(--muted);line-height:1.9;margin:0 0 18px}.contact-copy p:last-child{margin-bottom:0}.contact-email{color:var(--burgundy);border-bottom:1px solid var(--burgundy);padding-bottom:1px;transition:opacity .2s}.contact-email:hover{opacity:.7}
/* FAQ list: the site's existing details/summary accordion, left aligned on its own page. */
.faq-accordions{border-top:1px solid var(--line);max-width:850px}.faq-accordions summary{padding-right:28px}.faq-accordions p a{color:var(--burgundy);border-bottom:1px solid var(--burgundy)}
@media(max-width:800px){.faq-accordions summary{font-size:21px;line-height:1.3}}
/* Contact page: decorative handset hanging from the top-right. Absolutely placed so it never
enters the text flow, and sized narrow enough that it cannot reach the 620px copy column. */
.contact-page{position:relative}.contact-page .page-intro,.contact-copy{position:relative;z-index:1}.contact-phone{position:absolute;top:0;right:7%;width:clamp(84px,9.6vw,140px);z-index:0;pointer-events:none}.contact-phone img{display:block;width:100%;height:auto}
@media(max-width:800px){.contact-phone{position:static;width:108px;margin:40px 4% 0 auto}}
/* The product-page heart sits beside the title. Its position:static rule lives earlier in this
file than .heart{position:absolute}, and at equal specificity the later rule won, which threw the
button to the page's top-right where the header painted over it. Re-assert it here. */
.product-wishlist-heart{position:static;flex:none;margin-top:8px}
@media(max-width:800px){.product-wishlist-heart{margin-top:4px}}
/* Lotus backdrop. The stem is one continuous irregular path generated in script.js against the
container's measured height, so it never repeats and never stretches; see renderLotusBackdrop().
Decorative only. The host isolates a stacking context and the layer sits at
z-index -1, so it paints behind the page content without any rule having to
touch the other children. An earlier version lifted every direct child to
position:relative instead, which silently overrode position:fixed on the size
chart modal and the image lightbox. Do not reintroduce that. */
.category-page,.product-page-shell{position:relative;isolation:isolate}
.category-page>.shop-lotus,.product-page-shell>.shop-lotus{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.shop-lotus svg{display:block;width:100%;height:100%}
.category-page>.shop-lotus{opacity:.18}
.product-page-shell>.shop-lotus{opacity:.1}
@media(max-width:800px){.category-page>.shop-lotus{opacity:.16}}
/* Hover-image timing, in one place so it can be retuned without touching a
rule. 900ms was chosen by measuring crossfade progress at the quarter marks
against several curves: an ease-out like cubic-bezier(.22,.61,.36,1) was 62%
faded a quarter of the way in, which reads as a fast switch followed by a
wait. cubic-bezier(.45,.05,.25,1) is near 20% at the quarter and 77% at the
half, so it starts gently, carries through the middle and settles long -
deliberate rather than abrupt. The zoom stays at 1.03: if the interaction
ever needs more presence, raise --hover-fade, not --hover-zoom. */
/* Product-card hover image. script.js gives every card that has a second
catalogue image two stacked layers: .product-image-base carries image 1 and
.product-image-alt carries image 2. Only these layers move. Their parent
.product-image stays a fixed, overflow:hidden, aspect-ratio box and never
transforms, so the zoom is clipped to the card's existing crop and the card,
the heart and the tag cannot shift. Nothing here changes a dimension, so no
card can move a neighbour.
Image 1 stays fully opaque underneath while image 2 fades in over it, rather
than the two cross-dissolving. Fading both at once drops the composite to
about 75% opacity halfway through, which washes the photograph out against
the placeholder colour behind it. This way the card never loses density.
Both layers share one transform, so the zoom runs continuously through the
crossfade instead of restarting when the top image takes over. Transitions
interrupt from wherever they are, so flicking the cursor on and off reverses
from the current frame rather than snapping.
.has-hover-image is added by script.js only once image 2 has decoded, so the
effect can never open on a blank layer. A single-image product never gets the
layers and a failed second image never gets the class; both keep the plain
behaviour. Category cards are a different component and are not affected. */
.product-image-base,.product-image-alt{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;transform:scale(1);transform-origin:center;backface-visibility:hidden;transition:opacity var(--hover-fade) var(--hover-ease),transform var(--hover-fade) var(--hover-ease)}
.product-image-base{opacity:1}
.product-image-alt{opacity:0}
/* The corner sheen sat above image 1 but under image 2, so it vanished on
hover. Lifting it above both keeps the resting card identical and makes the
hover consistent; the heart and tag are lifted past it so they stay on top. */
.product-card .product-image:before{z-index:1;transition:transform var(--hover-fade) var(--hover-ease)}
.product-card .heart,.product-card .product-tag{z-index:2}
/* Pointer-only. A touch device never enters this state, so the card keeps its
first image and the product page's own swipe gallery is untouched. */
@media (hover:hover) and (pointer:fine){
.product-card.has-hover-image:hover .product-image-base,
.product-card.has-hover-image:hover .product-image-alt{transform:scale(var(--hover-zoom))}
.product-card.has-hover-image:hover .product-image-alt{opacity:1}
}
@media (prefers-reduced-motion:reduce){.product-image-base,.product-image-alt{transition:none;transform:none}}
/* Product gallery controls, size availability states and the image lightbox.
Colours, borders and type all come from the existing Tamira variables; no
new palette or font is introduced. */
.product-stage{position:relative}
.product-stage .product-main-image{cursor:zoom-in}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:#fffdfbe6;color:var(--burgundy);font:18px var(--sans);line-height:1;cursor:pointer;opacity:0;transition:opacity .25s ease;display:grid;place-items:center;padding:0}
.product-stage:hover .gallery-nav,.gallery-nav:focus-visible{opacity:1}
.gallery-prev{left:12px}
.gallery-next{right:12px}
.product-thumbnail span{display:block;aspect-ratio:3/4}
/* Seven sizes at a comfortable tap size are wider than a phone, so the row wraps
rather than pushing the page into horizontal scrolling. */
.size-options{flex-wrap:wrap}
.size-option{transition:border-color .2s ease,background .2s ease,color .2s ease}
.size-option.is-selected{border-color:var(--burgundy);background:var(--burgundy);color:var(--white)}
.size-option.is-unavailable{color:#b9aeab;background:var(--cream);border-style:dashed;cursor:not-allowed;position:relative}
.size-option.is-unavailable:after{content:'';position:absolute;left:6px;right:6px;top:50%;height:1px;background:#c9bdb9;transform:rotate(-18deg)}
.size-block.needs-size .size-options{outline:1px solid var(--burgundy);outline-offset:6px}
.size-hint{min-height:14px;margin:10px 0 0;font-size:11px;color:var(--burgundy)}
.size-hint:empty{min-height:0}
.product-lightbox{position:fixed;inset:0;z-index:30;background:rgba(39,35,35,.92);display:grid;grid-template-rows:1fr;padding:56px 16px}
.product-lightbox[hidden]{display:none}
.lightbox-stage{display:grid;place-items:center;overflow:hidden;touch-action:none;min-width:0;min-height:0}
/* Sized against the viewport rather than with percentages: a percentage max-height
on a grid item does not reliably resolve, which let the image render at its
natural height and overflow. Both axes are constraints, so the browser keeps
the image's own proportions; nothing is stretched. */
.lightbox-image{max-width:calc(100vw - 32px);max-height:calc(100vh - 112px);max-width:calc(100dvw - 32px);max-height:calc(100dvh - 112px);width:auto;height:auto;object-fit:contain;transition:transform .2s ease;cursor:zoom-in}
.product-lightbox.is-zoomed .lightbox-image{cursor:grab;transition:none}
.lightbox-close{position:absolute;top:18px;right:20px;width:40px;height:40px;border:0;border-radius:50%;background:#fffdfb1f;color:var(--white);font:22px var(--sans);line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:#fffdfb1f;color:var(--white);font:22px var(--sans);line-height:1;cursor:pointer}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-close:hover,.lightbox-nav:hover{background:#fffdfb33}
.lightbox-counter{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fffdfbb3;font-size:11px;letter-spacing:.14em;margin:0}
@media(max-width:800px){
.gallery-nav{display:none}
.product-stage .product-main-image{touch-action:pan-y}
.size-option{width:46px;height:44px}
.product-lightbox{padding:64px 8px}
.lightbox-image{max-width:calc(100vw - 16px);max-height:calc(100vh - 128px);max-width:calc(100dvw - 16px);max-height:calc(100dvh - 128px)}
.lightbox-nav{width:38px;height:38px;font-size:19px}
.lightbox-prev{left:6px}
.lightbox-next{right:6px}
}
@media(prefers-reduced-motion:reduce){.gallery-nav,.lightbox-image{transition:none}}
/* Checkout, payment and order-confirmation chrome. These three pages run a
stripped header instead of .site-header: the Shop menu, search and wishlist
are all routes away from a purchase in progress. */
.checkout-header{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:5}
.checkout-header-wrap{max-width:1440px;margin:auto;padding:0 4.5%;height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.checkout-header .logo{position:static;transform:none;justify-self:center}
.checkout-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.checkout-back::before{content:"\2190";font-size:13px;line-height:1}
.checkout-back:hover,.checkout-footer a:not(.footer-logo):hover{color:var(--burgundy)}
.checkout-secure{justify-self:end;display:inline-flex;align-items:center;gap:8px;margin:0;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--burgundy)}
.checkout-secure svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.checkout-footer{border-top:1px solid var(--line);padding:36px 4.5% 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:11px}
.checkout-footer .footer-logo{position:static;transform:none;color:var(--burgundy);font-size:34px}
.checkout-footer nav{display:flex;flex-wrap:wrap;gap:22px}
.checkout-footer a:not(.footer-logo){color:var(--muted)}
.checkout-body{overflow-x:hidden}
/* Checkout form: notes, the state select and the shared field metrics. Font
inheritance is scoped to .checkout-form so the account and sign-in forms
keep the appearance they already had. */
.checkout-section-note{color:var(--muted);font-size:12px;line-height:1.7;margin:-13px 0 24px;max-width:520px}
.required-mark{color:var(--burgundy)}
.checkout-signin-aside{display:inline-flex;align-items:center;gap:10px;margin-left:auto}
.checkout-form .field-group input,.checkout-form .field-group select{font:inherit;max-width:100%}
.field-group select{display:block;width:100%;max-width:100%;height:46px;border:1px solid var(--line);border-radius:0;background:var(--white) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23800020' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 13px center;background-size:11px 7px;padding:0 34px 0 13px;color:var(--ink);outline:0;appearance:none;cursor:pointer;transition:border-color .2s}
.field-group select:focus{border-color:var(--burgundy)}
.field-group select.is-invalid{border-color:var(--burgundy);background-color:#fff8f7}
.checkout-form-error{min-height:16px;color:var(--burgundy);font-size:12px;line-height:1.6;margin:0 0 14px}
.checkout-submit-note{color:var(--muted);font-size:11px;line-height:1.7;text-align:center;margin:14px 0 0}
/* Shipping. The quote panel always states that shipping is charged, because
Tamira has no free-shipping tier and the copy must not imply one. */
.checkout-shipping,.checkout-payment{display:grid;gap:14px}
.shipping-quote{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--burgundy);padding:17px 16px}
.shipping-quote.is-pending{border-color:var(--line);background:var(--cream)}
.shipping-quote strong{display:block;font-size:12px;font-weight:600}
.shipping-quote small{display:block;color:var(--muted);font-size:11px;margin-top:5px;line-height:1.5}
.shipping-amount{font-size:16px;font-weight:600;color:var(--burgundy);white-space:nowrap}
.shipping-amount.summary-muted{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.shipping-hint{color:var(--muted);font-size:11px;line-height:1.7;margin:0}
/* Payment section and the payment step's status panel. */
.payment-lead{color:var(--muted);font-size:12px;line-height:1.8;margin:0}
.payment-methods{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.payment-methods li{border:1px solid var(--line);padding:8px 13px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.payment-notice{border:1px solid var(--line);border-left:3px solid var(--burgundy);background:var(--cream);padding:20px 22px}
.payment-notice strong{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.payment-notice p{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 10px}
.payment-notice p:last-child{margin-bottom:0}
.payment-notice.is-failed{border-left-color:var(--deep-burgundy);background:#fff8f7}
.payment-notice.is-working{border-left-color:var(--line)}
/* Final review, shared by the checkout review section, the payment step and
the confirmation page so all three show the same order the same way. */
.review-block h3{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--burgundy);margin:0 0 11px}
.review-block p{margin:0 0 5px;font-size:12px;line-height:1.7}
.review-items{display:grid;gap:11px;list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line)}
.review-items li{display:flex;justify-content:space-between;gap:18px;font-size:12px}
.review-items strong,.review-charges strong{font-weight:600;white-space:nowrap}
.review-charges{display:grid;gap:9px;padding-top:18px;border-top:1px solid var(--line)}
.review-charges div{display:flex;justify-content:space-between;gap:18px;font-size:12px}
.review-charges .review-total{padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.review-total strong{font-size:17px;color:var(--burgundy)}
/* Order summary additions: the shipping sub-note and per-item problems. */
.checkout-shipping-line span{display:flex;flex-direction:column;gap:6px}
.checkout-shipping-note{color:var(--muted);font-size:10px;line-height:1.5;font-weight:400;max-width:215px}
.checkout-summary-line strong.summary-muted{font-weight:600;color:var(--muted)}
.checkout-summary-legal{color:var(--muted);font-size:11px;line-height:1.7;margin:16px 0 0}
.checkout-summary-problem{color:var(--burgundy);font-size:10px;line-height:1.6;margin:7px 0 0}
.checkout-summary-item.has-problem{background:#fff8f7}
.checkout-empty{max-width:640px;margin:0 auto;text-align:center;padding:70px 0 90px}
.checkout-empty h1{font:600 clamp(52px,6.5vw,84px)/.85 var(--serif);letter-spacing:-.05em;margin:0 0 22px}
.checkout-empty p{color:var(--muted);line-height:1.8;margin:0 auto 30px;max-width:440px}
.checkout-empty-actions,.payment-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.payment-actions{justify-content:flex-start}
/* Payment step page. */
.payment-page-shell{max-width:1180px;margin:auto;padding:30px 4.5% 120px}
.payment-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:7%;align-items:start}
.payment-status{display:grid;gap:20px;min-width:0;align-content:start}
.payment-review{background:var(--cream);padding:32px 30px;min-width:0}
.payment-review h2{font:600 42px/.85 var(--serif);margin:0 0 26px}
.payment-review .review-items{border-top:0;padding-top:0}
.payment-review .review-block{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
/* Order confirmation. */
.confirmation-page-shell{max-width:1180px;margin:auto;padding:62px 4.5% 120px}
.confirmation-heading{text-align:center;padding-bottom:48px;border-bottom:1px solid var(--line);margin-bottom:48px}
.confirmation-heading h1{font:600 clamp(56px,7vw,92px)/.82 var(--serif);letter-spacing:-.05em;margin:0 0 24px}
.confirmation-heading>p{color:var(--muted);line-height:1.9;margin:0 auto;max-width:520px}
.confirmation-order-number{display:inline-grid;gap:7px;justify-items:center;margin-top:34px;border:1px solid var(--line);background:var(--cream);padding:20px 34px}
.confirmation-order-number span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--burgundy)}
.confirmation-order-number strong{font:600 27px/1 var(--serif);letter-spacing:.02em}
.confirmation-order-number small{color:var(--muted);font-size:11px}
.confirmation-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:8%;align-items:start}
.confirmation-items h2,.confirmation-summary h2{font:600 40px/.85 var(--serif);margin:0 0 26px}
.confirmation-item{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.confirmation-item:first-of-type{border-top:1px solid var(--line)}
.confirmation-item-image{display:block;aspect-ratio:3/4;background-size:cover;background-position:center}
.confirmation-item-name{font:600 23px/.9 var(--serif);color:var(--ink)}
.confirmation-item p{font-size:11px;color:var(--muted);margin:9px 0 0}
.confirmation-item p span{padding:0 4px;color:var(--burgundy)}
.confirmation-item>strong{font-size:13px;font-weight:600;white-space:nowrap}
.confirmation-summary{background:var(--cream);padding:32px 30px;position:sticky;top:25px}
.confirmation-summary .review-block{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.confirmation-continue{width:100%;justify-content:center;margin-top:26px}
@media(max-width:900px){
.payment-layout,.confirmation-layout{grid-template-columns:1fr;gap:40px}
.payment-status{order:1}
.payment-review,.confirmation-summary{order:2;position:static}
}
@media(max-width:800px){
.checkout-header-wrap{height:64px;padding:0 5%;grid-template-columns:1fr auto;gap:12px}
.checkout-header .logo{font-size:31px;justify-self:end}
.checkout-secure{display:none}
.checkout-footer{flex-direction:column;text-align:center;gap:14px;padding:28px 5% 32px}
.checkout-footer nav{justify-content:center;gap:16px}
.checkout-signin-prompt{flex-direction:column;align-items:flex-start;gap:10px}
.checkout-signin-aside{margin-left:0;flex-wrap:wrap}
.checkout-section-note{margin:-9px 0 20px}
.shipping-quote{flex-direction:column;align-items:flex-start;gap:10px}
.checkout-shipping-note{max-width:none}
.field-group select{height:49px}
.payment-page-shell,.confirmation-page-shell{padding:42px 6% 80px}
.payment-review,.confirmation-summary{padding:26px 20px}
.payment-review h2,.confirmation-items h2,.confirmation-summary h2{font-size:34px}
.payment-actions{justify-content:stretch}
.payment-actions .button,.checkout-empty-actions .button{flex:1 1 100%;justify-content:center}
.confirmation-heading{padding-bottom:36px;margin-bottom:36px}
.confirmation-heading h1{font-size:58px}
.confirmation-order-number{width:100%;padding:17px 20px}
.confirmation-item{grid-template-columns:72px minmax(0,1fr);row-gap:10px}
.confirmation-item>strong{grid-column:2;justify-self:start}
.checkout-empty h1{font-size:52px}
}
.checkout-summary-problem a{color:var(--burgundy);border-bottom:1px solid var(--burgundy);white-space:nowrap}
/* Checkout column placement. Payment and the submit button sit outside the
form (the button reaches it via form="checkout-form") so the page reads
Contact, Address, Shipping, Order Summary, Payment in that order on a
phone, while desktop keeps the summary in a sticky right rail. */
.checkout-layout{gap:0 9%}
.checkout-form{grid-column:1;grid-row:1}
.checkout-order-summary{grid-column:2;grid-row:1/span 2}
.checkout-payment-block{grid-column:1;grid-row:2;min-width:0}
.checkout-payment-block .checkout-section-heading{margin-bottom:27px}
.shipping-pending{color:var(--muted);font-size:12px;line-height:1.8;border:1px solid var(--line);background:var(--cream);padding:17px 16px;margin:0}
@media(max-width:800px){.checkout-payment-block{order:3}}
.field-error.is-checking{color:var(--muted)}
.field-group input[readonly]{background:var(--cream);color:var(--muted);cursor:default}
/* Search. The panel drops from the top so it reads as part of the existing
header rather than a second interface pasted over the site. */
.search-overlay{position:fixed;inset:0;z-index:30;background:rgba(39,35,35,.45)}
.search-overlay[hidden]{display:none}
.search-panel{background:var(--white);border-bottom:1px solid var(--line);max-height:88vh;max-height:88dvh;overflow-y:auto}
.search-form{position:relative;display:flex;align-items:center;gap:12px;max-width:1440px;margin:auto;padding:22px 4.5%;border-bottom:1px solid var(--line)}
.search-form-icon{display:grid;place-items:center;border:0;background:none;padding:0;color:var(--burgundy);flex:0 0 auto;cursor:pointer}
.search-form-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.search-input{flex:1 1 auto;min-width:0;border:0;background:none;outline:0;color:var(--ink);font:400 17px/1.4 var(--serif);letter-spacing:normal;padding:10px 0}
.search-input::placeholder{color:var(--line);font-weight:400}
.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-decoration{appearance:none;display:none}
.search-clear{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--cream);color:var(--burgundy);font-size:17px;line-height:1;cursor:pointer;padding:0}
.search-clear:hover{background:var(--blush)}
.search-submit{flex:0 0 auto;border:0;background:var(--burgundy);color:#fff;padding:12px 20px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.search-close{flex:0 0 auto;border:0;background:none;color:var(--muted);font-size:27px;line-height:1;padding:0 2px;cursor:pointer}
.search-close:hover{color:var(--burgundy)}
.search-panel-body{max-width:1440px;margin:auto;padding:0 4.5%}
.search-suggestions{list-style:none;margin:0;padding:6px 0 20px}
.search-suggestions[hidden]{display:none}
.search-suggestion a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:15px;align-items:center;padding:11px 10px;margin:0 -10px;color:var(--ink)}
.search-suggestion-image{display:block;aspect-ratio:3/4;background-size:cover;background-position:center}
.search-suggestion-text{display:grid;gap:5px;min-width:0}
.search-suggestion-text strong{font:600 21px/1 var(--serif);font-weight:600}
.search-suggestion-text small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.search-suggestion-price{font-size:12px;font-weight:600;white-space:nowrap}
.search-suggestion.is-active a,.search-suggestion a:hover{background:var(--cream)}
.search-empty-note{color:var(--muted);font-size:12px;line-height:1.8;margin:0;padding:14px 0 24px}
.search-empty-note[hidden]{display:none}
.search-popular{padding:16px 0 26px}
.search-popular[hidden]{display:none}
.search-popular .eyebrow{margin-bottom:13px}
.search-popular-links{display:flex;flex-wrap:wrap;gap:9px}
.search-popular-links a{border:1px solid var(--line);padding:9px 15px;font-size:11px;letter-spacing:.06em;color:var(--ink)}
.search-popular-links a:hover{border-color:var(--burgundy);color:var(--burgundy)}
/* Search results. The grid and the cards are the category page's, unchanged. */
.search-page-shell .search-count{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--burgundy);margin:18px 0 0}
.search-page-shell .search-popular{padding:0 0 42px}
.search-fallback{margin-top:8px}
.search-fallback-note{color:var(--muted);font-size:12px;line-height:1.8;margin:-14px 0 26px;max-width:560px}
@media(max-width:800px){
.search-form{gap:9px;padding:15px 5%}
.search-input{font-size:16px}
.search-submit{display:none}
.search-panel-body{padding:0 5%}
.search-panel{max-height:100vh;max-height:100dvh}
.search-suggestion a{grid-template-columns:46px minmax(0,1fr);row-gap:6px;padding:12px 8px;margin:0 -8px}
.search-suggestion-price{grid-column:2;justify-self:start;font-size:11px}
.search-suggestion-text strong{font-size:19px}
.search-popular-links a{padding:10px 14px}
.search-fallback-note{margin:-8px 0 20px}
}
/* ── Touch comfort ──────────────────────────────────────────────────────
An audit of every page at 320/375/390/430/768/820/1024/1280/1440 found no
horizontal overflow and nothing outside the viewport, so the layout work
was already done. What it found was touch quality, and this block is the
whole of the fix.
1. Form controls under 16px. iOS Safari zooms the page the moment one is
focused, which is the "unexpected zoom" that makes a mobile form feel
broken. The sort select was 11px, the quantity inputs 12px and every
checkout field 14px. The checkout rule has to name .checkout-form
because that file sets `font:inherit`, a shorthand that carries
font-size and outranks a bare .field-group selector. The search field
is already far larger and is deliberately left out.
2. Undersized targets: header icons at 25x25, the hamburger at 22x21,
product-card hearts at 31x31 and breadcrumb links at 34x13.
Targets grow through a transparent ::after rather than by resizing the
control, so each keeps its drawn size and the header, product card and
toolbars look identical. Vertical growth is free. Horizontal growth is
taken ONLY where an ancestor clips it - the card heart, inside
.product-image's overflow:hidden - because an absolutely positioned box
hanging past its parent widens the page's scroll area. The product page's
wishlist heart sits in the title row with nothing clipping it, and a -7px
inset there put 7px of horizontal scroll on that page; that is why the
selector is .product-image .heart and not .heart.
The header icons therefore gain height but not width: at 320px the row
cannot widen without meeting the centred logo. The mobile gap goes from
10px to 16px instead, so a miss to either side lands on dead header rather
than the neighbouring control.
The query is width OR coarse pointer: phones and small tablets by width,
and any genuine touch device whatever its width. A mouse user is never
affected at any size, which is what keeps the desktop design untouched. */
@media (max-width:820px), (pointer:coarse){
.field-group input,.field-group select,.quantity-control input,
.category-toolbar select,.newsletter input,.account-fields input,
.login-form input,.create-form input,
.checkout-form .field-group input,.checkout-form .field-group select{font-size:16px}
/* The steppers already grow to 42px on mobile; widen the field so the
larger text is not cramped. */
.quantity-control input{width:52px}
/* Validation messages were 10px. "This PIN code does not match the selected
state." is the one piece of text a customer has to read to finish paying,
so it gets a readable size on a phone. */
.field-error,.login-error,.checkout-form-error{font-size:12px;line-height:1.5}
.menu-toggle,.breadcrumbs a,.main-nav>a,.shop-trigger{position:relative}
.icon-button::after,.menu-toggle::after,.product-image .heart::after,
.breadcrumbs a::after,.main-nav>a::after,.shop-trigger::after{content:'';position:absolute}
.icon-button::after{inset:-10px 0}
/* The hamburger is the one control with real room beside it: nothing sits
between it and the centred logo, so it grows on both axes. */
.menu-toggle::after{inset:-12px -11px}
.product-image .heart::after{inset:-7px}
.breadcrumbs a::after,.main-nav>a::after,.shop-trigger::after{inset:-11px 0}
/* The 42px stepper was scoped to the bag, so the product page's quantity
control stayed 32x26 on a phone. Both are the same component and now
size together. */
.quantity-control button{width:42px;height:42px}
.quantity-control input{height:42px}
/* The remaining controls fail only on height: a 15-20px line box is a thin
thing to hit. They grow vertically, where there is always room, and not
horizontally, where they are already 42px or wider.
Inline links inside prose - the contact email, links inside policy copy -
are deliberately left alone. Growing a text link's hit area past its line
box makes neighbouring lines fight for the same tap, which is worse than
a slightly small target. */
/* .logo is deliberately NOT in this list. It is positioned by other rules
(absolute in the header, static in the footer) and a `position:relative`
here both broke the header centring and, because
`.site-footer .footer-logo{position:static}` outranks it, left the footer
logo's pseudo resolving against a far-off containing block - where
`inset:-10px 0` stretched it across the page and swallowed every tap into
index.html. Never attach one of these to an element whose position is set
elsewhere; the pseudo must resolve against the control itself. */
.text-link,.footer-links a,.footer-bottom a,.cart-remove,.continue-link,
.wishlist-add,.wishlist-remove,.product-wishlist-heart,.size-chart-trigger,
.checkout-back,.checkout-signin-trigger,.checkout-footer a:not(.footer-logo){position:relative}
.text-link::after,.footer-links a::after,.footer-bottom a::after,
.cart-remove::after,.continue-link::after,.wishlist-add::after,.wishlist-remove::after,
.product-wishlist-heart::after,.size-chart-trigger::after,.checkout-back::after,
.checkout-signin-trigger::after,
.checkout-footer a:not(.footer-logo)::after{content:'';position:absolute;inset:-10px 0}
/* Product-name links in the bag, the checkout summary and the confirmation
sit above their own meta line, which is plain text and competes with
nothing, so they can take a few pixels in each direction. */
.cart-item-name,.checkout-summary-name,.confirmation-item-name{position:relative}
.cart-item-name::after,.checkout-summary-name::after,
.confirmation-item-name::after{content:'';position:absolute;inset:-5px 0}
}
@media(max-width:800px){.nav-actions{gap:16px}}
/* Small phones. The header carries a centred logo plus a hamburger and three
icons; at 375px and up they clear each other, but at 320-374px the logo and
the icon cluster measured a 16px overlap. The logo comes down a little and
the icon gap tightens, which is the smallest change that separates them.
375px and above is untouched, so the common phone sizes keep the 16px gap. */
@media(max-width:374px){
.site-header .logo{font-size:30px}
.nav-actions{gap:11px}
}
/* Hero composition on mobile and tablet. The artwork is 1376x768 (aspect
1.79) and the woman sits between 60% and 89% of its width, face at ~77%.
The mobile hero was a fixed 620px tall, so on a 390px phone `cover` scaled
the image to 1111px wide and showed only 35% of it - and at
background-position 62% that window ended at 75%, cutting her face off at
the right edge. That is the crop being reported.
Two changes, no zoom and no new asset. The height becomes proportional to
the width, so the frame stops being extremely tall and portrait: the
visible slice goes from 35% to ~41% on a phone and ~77% on a tablet. Then
the focal point moves to 74%, which brings her whole head, necklace and
arms inside the frame instead of clipping them.
The text column narrows to 66% - which is wider than its longest line
already needs, so nothing re-wraps - so the headline sits beside her
rather than across her face.
All of this is inside max-width:800px. The desktop hero keeps its own
height, its `center 35%` focal point and its full-width text column. */
@media(max-width:800px){
.hero{height:min(560px,135vw)}
.hero-image{background-position:74% center}
.hero-content{max-width:66%}
}
/* Touch equivalent of the product-card hover crossfade. A horizontal swipe
steps the card to the next or previous catalogue image (a tap opens the
product page instead); script.js swaps which layer is in front and toggles
these classes, so the same duration, easing and zoom apply as on desktop.
Scoped to devices without a fine hovering pointer, so the desktop hover
rules and these can never both be live on one device. */
@media (hover:none), (pointer:coarse){
.product-card.is-showing-alt .product-image-base{opacity:0}
.product-card.is-showing-alt .product-image-alt{opacity:1}
.product-card.is-advancing .product-image-base,
.product-card.is-advancing .product-image-alt{transform:scale(var(--hover-zoom))}
}
/* Our Story artwork on mobile. On a phone the section is a single column, so
the lotus sat as its own 350px band above the heading - and because the
artwork's forearm is cropped square at the bottom of the file, that band
ended in a hard horizontal edge. That edge is what reads as a pasted-on
rectangle; the PNG itself is transparent.
Here it leaves the flow entirely and becomes a watermark behind the opening
of the section: low opacity so the copy stays the thing you read, bled off
the right edge so it feels like part of the page rather than a placed
image, and faded out along the bottom with a mask so the cropped sleeve
dissolves instead of ending in a line. It is also removed from the tab
order and made unhittable, so it cannot take a tap meant for the text.
Mobile only. Above 800px the desktop two-column Our Story layout, with the
artwork in its own column, is untouched. */
@media(max-width:800px){
.story-section{position:relative;overflow:hidden}
.story-image{position:absolute;top:14px;right:-10%;width:78%;max-width:340px;height:auto;
display:block;opacity:.2;pointer-events:none;user-select:none;z-index:0;
-webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.35) 78%,transparent 97%);
mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.35) 78%,transparent 97%)}
.story-image img{width:100%;height:auto;max-width:none}
.story-copy{position:relative;z-index:1}
}
/* Contact Us artwork on mobile and tablet. The desktop rule already hangs the
telephone absolutely in the top-right; the mobile rule undid that
(`position:static; margin:40px 4% 0 auto`), which dropped a 108x461
illustration underneath the copy. Here it goes back to the corner, scaled
down so it reads as a small decorative element rather than a block, and the
intro and copy get a matching right inset so nothing runs beneath it. Both
values scale together, so the gutter always matches the artwork's width.
The desktop rule above 800px is untouched. */
@media(max-width:800px){
.contact-phone{position:absolute;top:6px;right:6%;width:clamp(66px,18vw,100px);margin:0;z-index:0;pointer-events:none}
.contact-page .page-intro,.contact-copy{padding-right:clamp(80px,22vw,124px)}
.contact-copy{max-width:none}
}
/* An order number is one value and has to read as one. Cormorant Garamond
defaults to old-style figures: 1 and 0 sit at x-height while 3,4,5,7,9 drop
below the baseline, so "TM1001" rendered with the letters visibly taller
than the digits, and differently again for every order number. Lining
figures put every digit at cap height, matching TM exactly.
Declared here, at the end, because the `font` shorthand resets
font-variant-numeric - so this has to come after every rule that sets it. */
.confirmation-order-number strong{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* An offer, written the Tamira way: the old figure is still readable but
plainly secondary, the new one carries the weight, and the percentage is a
quiet note rather than a shout. No new colour - the burgundy is the same one
the price already used, and the muted grey is the site's own. */
.price-was{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;margin-right:8px;font-weight:400}
.price-now{color:var(--burgundy);font-weight:600}
.price-off{margin-left:8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.product-price .price-was{font-size:.85em}
.product-price .price-off{display:inline-block;margin-left:10px}
.search-suggestion-price .price-off{display:none}
@media(max-width:800px){.product-info .price-off{display:none}}
/* A piece with nothing left in any size. A soft veil in the site's own off-
white, so the garment is still clearly visible underneath, with the label in
the same small-caps the product tag already uses. No new colour, no new
font, and the card itself is untouched.
pointer-events stay off so the veil never swallows a click; the heart and
the New/Bestseller tag are lifted above it so both stay crisp. */
.sold-out-flag{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
background:rgba(255,253,251,.66);pointer-events:none}
.sold-out-flag span{background:var(--white);color:var(--burgundy);border:1px solid var(--line);
padding:8px 16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.product-image .heart,.product-image .product-tag{z-index:3}
/* The overlay is absolutely positioned, so every surface it can appear on has to
be a containing block. .product-image already is; these two were not. */
.product-main-image,.search-suggestion-image{position:relative}
/* The main image on the product page is larger, so the label can be too. */
.product-main-image .sold-out-flag span{padding:11px 22px;font-size:11px;letter-spacing:.2em}
/* The search thumbnail is 48px or so - a bordered label will not fit, so the
veil carries a single rule through it instead. */
.search-suggestion-image .sold-out-flag{background:rgba(255,253,251,.72);overflow:hidden}
/* The thumbnail is only 52px wide (46px on mobile), so the label wraps onto two
lines here instead of running off the side of the image. */
.search-suggestion-image .sold-out-flag span{padding:0;border:0;background:none;font-size:8px;letter-spacing:.04em;line-height:1.2;text-align:center;white-space:normal}
/* A sold-out piece stops inviting the hover lift. */
.category-products .product-card.is-sold-out:hover{transform:none}
/* The two purchase buttons, when there is nothing to buy. */
.product-actions .button.is-sold-out{opacity:.45;cursor:not-allowed;pointer-events:none}
/* The brand wordmark, as an image rather than set type.
Height is in em, so it is driven by the font-size each context already sets
on .logo / .footer-logo - 43px in the header, 38 and 30 at the two narrower
breakpoints, 57 in the footer, 34 in the checkout footer. Not one of those
rules had to change, and no breakpoint was added: the logo scales exactly
where the wordmark always did.
The footer sits on deep burgundy and carries the light variant instead; the
checkout footer is on the cream ground and keeps the burgundy one. */
.logo-mark{display:block;width:auto;height:.64em}
/* My Orders, inside the existing account panel.
Built from the same borders, cream fills and small-caps labels the account
page already uses - no new colour, no new font, no new layout language. */
.account-orders{display:grid;gap:18px}
.account-orders-loading{color:var(--muted);font-size:13px;margin:0}
.account-order{border:1px solid var(--line);background:var(--white)}
.account-order-head{display:flex;flex-wrap:wrap;gap:14px;align-items:start;justify-content:space-between;
padding:20px 22px;border-bottom:1px solid var(--line)}
.account-order-number{margin:0;font:600 15px var(--sans);letter-spacing:.06em;color:var(--burgundy);font-variant-numeric:lining-nums}
.account-order-date{margin:4px 0 0;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.account-order-head-right{display:flex;align-items:center;gap:10px}
.account-order-badge{background:var(--cream);color:var(--ink);padding:6px 11px;font-size:9px;
letter-spacing:.14em;text-transform:uppercase}
.account-order-badge.is-cancelled{background:var(--blush);color:var(--burgundy)}
.account-order-payment{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.account-order-payment.is-paid{color:var(--burgundy)}
/* The four steps. A completed step is burgundy, the rest sit in the muted
grey the account page already uses for secondary text. */
.account-order-timeline{list-style:none;display:flex;gap:6px;margin:0;padding:18px 22px;border-bottom:1px solid var(--line)}
.account-order-step{flex:1;min-width:0;border-top:2px solid var(--line);padding-top:9px}
.account-order-step.is-done{border-top-color:var(--burgundy)}
.account-order-step-name{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.account-order-step.is-done .account-order-step-name{color:var(--burgundy)}
.account-order-step-date{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.account-order-cancelled{margin:0;padding:18px 22px;border-bottom:1px solid var(--line);font-size:12px;color:var(--burgundy)}
.account-order-items{list-style:none;margin:0;padding:6px 22px}
.account-order-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0}
.account-order-item + .account-order-item{border-top:1px solid var(--line)}
.account-order-thumb{display:block;aspect-ratio:3/4;background-size:cover;background-position:center}
.account-order-item-main{display:grid;gap:4px;min-width:0}
.account-order-item-name{font-size:13px}
.account-order-item-meta{font-size:11px;color:var(--muted)}
.account-order-item-total{font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:lining-nums}
.account-order-tracking{display:flex;flex-wrap:wrap;gap:26px;padding:16px 22px;border-top:1px solid var(--line);background:var(--cream)}
.account-order-tracking p{margin:0;display:grid;gap:3px}
.account-order-tracking span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.account-order-tracking strong{font-size:12px;font-variant-numeric:lining-nums}
.account-order-charges{border-top:1px solid var(--line);padding:16px 22px;background:var(--cream);display:grid;gap:7px}
.account-order-charges p{margin:0;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);
font-variant-numeric:lining-nums}
.account-order-grand{color:var(--ink);font-weight:600;padding-top:8px;border-top:1px solid var(--line)}
@media(max-width:800px){
.account-order-head{padding:16px}
.account-order-timeline{padding:14px 16px;gap:4px}
.account-order-step-name{font-size:8px;letter-spacing:.08em}
.account-order-items{padding:4px 16px}
.account-order-item{grid-template-columns:44px minmax(0,1fr) auto;gap:11px}
.account-order-charges,.account-order-tracking{padding:14px 16px}
}
/* Guest order tracking, inside the existing account page.
It reuses .account-auth-content, .account-auth-form, .field-group,
.account-form-message and .account-auth-switch unchanged - these three rules
are the only additions, and they introduce no new colour or font. */
.account-guest-heading{font:500 27px/1 var(--serif);margin:0 0 20px;letter-spacing:-.01em}
.account-guest-layout{display:block}
.account-guest-divider{margin:0 10px;color:var(--line)}
@media(max-width:800px){
.account-guest-heading{font-size:24px;margin-bottom:16px}
/* The two lookup actions stack rather than crowd the line on a phone. */
.account-guest-divider{display:block;margin:6px 0}
}
/* Guest order tracking: alignment.
The sign-in and create-account forms are deliberately centred, so the guest
block gets its own modifier rather than a change to .account-auth-content -
it sits at the left margin, under "My Orders", like every other Tamira page. */
.account-guest-content{margin-left:0;margin-right:auto}
/* The two labels are different lengths, so on a two-column row one wraps to a
second line and used to push its input down. Each field is a column with the
input pushed to the bottom of the (equal-height) grid cell, so both input
boxes sit on the same line whatever the labels do. */
.account-guest-content .field-group{display:flex;flex-direction:column}
.account-guest-content .field-group input{margin-top:auto}
@media(max-width:800px){
/* Stacked, so there is no second column to align against and the labels sit
directly above their own input again. */
.account-guest-content .field-group input{margin-top:0}
}
/* Wishlist and Account live in the mobile menu, not the mobile header.
Hidden by default so the DESKTOP header and nav are exactly as they were -
the mobile media query above turns them on. */
.nav-mobile-only{display:none}
/* Guest order entry points. .account-auth-switch is centred because it belongs
under the centred sign-in and create-account cards; the guest lines sit in
left-aligned blocks instead, so they get a modifier rather than a change to
the shared rule. */
.account-guest-switch{text-align:left}
/* You May Also Like on the Account page. It reuses .related-products,
.section-heading, .product-grid and .related-grid unmodified - the heading
type, card design, hover, hearts, prices and the 4-to-2 column responsive
step all come from those. The only difference is the top margin: the rail is
a full-page section elsewhere, but here it is a row in .account-content,
which already supplies its own gap. */
.account-recommendations{margin-top:0}
/* =====================================================================
Type hierarchy - which family each element belongs to
---------------------------------------------------------------------
The tokens at the top of this file put every var(--serif) rule on
Cormorant Garamond and every var(--sans) rule on DM Sans, so the bulk of
the site needs no per-element font rule at all. The block below only moves
the handful of elements that were set in the display serif but are
functional text - product names, prices and order numbers, table cells,
form fields, footer links, accordion and sub headings. They keep their
existing size, weight, colour and spacing; only the family changes.
font-family is used deliberately instead of the font: shorthand, so the
original size/weight/line-height in each source rule survives untouched.
===================================================================== */
/* The wordmark is an image. These rules only ever styled the anchor around
it, but pinning them off the new pairing makes it impossible for a future
font edit to reach the logo. */
.logo,.footer-logo{font-family:var(--wordmark)}
/* Footer navigation. */
.footer-links a{font-family:var(--body)}
/* Product names in the cart, checkout summary and order confirmation. */
.cart-item-name,.checkout-summary-name,.confirmation-item-name{font-family:var(--body)}
/* Order data and search UI. */
.confirmation-order-number strong,.search-suggestion-text strong{font-family:var(--body)}
.search-input{font-family:var(--body)}
/* Sub headings: accordion titles, policy sub headings, guest-tracking title. */
.product-accordions summary,.faq-accordions summary,
.policy-content h3,.account-guest-heading{font-family:var(--body)}
/* Size-guide table headings and row headers. .sg-table thead th and tbody td
were already on the body family; this brings the other two into line so the
whole table is one typeface. */
.sg-table-heading,.sg-table tbody th{font-family:var(--body)}
/* =====================================================================
Shop by Categories - slow hover zoom (homepage only)
---------------------------------------------------------------------
The five cards carry their photo as a background-image on .category-card
itself, so the card cannot be scaled - that would drag its label and the
card's own box with it. Instead ::after re-uses the same image via
background-image:inherit and is the only thing that scales. The card, the
grid, the label position, the .category-band lotus/background and the page
height are all untouched, and the card's existing overflow:hidden clips the
zoom so it can never spill over a neighbouring category.
Layering keeps the resting card pixel-identical: ::after (the photo) sits
on top of the card background, the existing ::before corner sheen is lifted
above it, and the label above both.
Pointer-only, matching the pattern the product cards already use, so a
phone or tablet never gets a stuck tap-to-zoom state.
===================================================================== */
.category-card{isolation:isolate}
.category-card:after{content:'';position:absolute;inset:0;background-image:inherit;
background-position:center;background-size:cover;pointer-events:none;z-index:0;
transform:scale(1);transform-origin:center;backface-visibility:hidden;
transition:transform var(--category-zoom-fade) var(--category-zoom-ease)}
.category-card:before{z-index:1}
.category-card>span,.category-card b{position:relative;z-index:2}
@media (hover:hover) and (pointer:fine){
.category-card:hover:after{transform:scale(var(--category-zoom))}
}
@media (prefers-reduced-motion:reduce){
.category-card:after{transition:none}
.category-card:hover:after{transform:none}
}
/* =====================================================================
Order detail (#orders/TM1001)
---------------------------------------------------------------------
The view itself is built from pieces that already exist - .account-heading,
.breadcrumbs, .account-order, .account-empty-state, .text-link - so all
that is needed here is the spacing around the two new links. No colours,
no new components, nothing the account page did not already have.
===================================================================== */
.account-order-detail{max-width:1440px;margin:auto}
.account-order-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px}
.account-order-back span{font-size:15px}
/* The list's way into a single order. .text-link supplies the type; this only
lifts it off the date above it. */
.account-order-link{display:inline-flex;align-items:center;gap:9px;margin-top:12px}
.account-order-link span{font-size:15px}
.account-order-detail .account-empty-state{margin-top:0}
@media(max-width:800px){
/* The head already stacks at this width, so the link sits under the date
rather than beside the badges. */
.account-order-link{margin-top:10px}
.account-order-back{margin-bottom:22px}
}
/* Delivery address on the order detail view. Reuses .eyebrow for the label;
the element only needs its browser-default italic removing. */
.account-order-address{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.account-order-address address{font-style:normal;font-size:14px;line-height:1.8;color:var(--ink)}
/* =====================================================================
Forgot / reset password
---------------------------------------------------------------------
Both views are the sign-in view's own pieces - .account-auth-form,
.field-group, .account-form-message, .account-auth-switch and
.account-empty-state. These rules add only the forgot link, the show/hide
control inside a password box, and the requirement hint. No new colours
or fonts.
===================================================================== */
.account-forgot{margin:12px 0 0;text-align:right}
.account-forgot button{border:0;border-bottom:1px solid var(--burgundy);background:none;color:var(--burgundy);font-size:12px;padding:0;cursor:pointer}
.account-password-field{position:relative}
.account-password-field input{padding-right:72px}
/* Full height of the input, so the tap target is the input's height on a phone. */
.account-password-toggle{position:absolute;top:0;right:0;height:100%;min-width:64px;padding:0 14px;border:0;background:none;color:var(--burgundy);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.account-password-hint{color:var(--muted);font-size:11px;margin:14px 0 0}
.account-password-hint+.account-form-message{margin-top:8px}
.account-reset-state h3{overflow-wrap:break-word}
.account-reset-state .button{border:0;cursor:pointer}
@media(max-width:800px){
/* 44px tall so the link is an easy tap, underlined by text-decoration
because a border would sit at the bottom of the taller box. */
.account-forgot button{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-underline-offset:4px}
.account-reset-state h3{font-size:28px;line-height:1.05}
.account-reset-state .button{width:100%;justify-content:center;min-height:48px}
}