/* Zonemory poster demo: additions to the approved 8795 styles (zonemory-poster.css). */ /* ---- Global theme alignment (Flatsome/WooCommerce pages outside .zonemory-app) ---- */ html:root{--fs-color-primary:#303b4c;--primary-color:#303b4c;--fs-experimental-link-color:#303b4c;--fs-experimental-link-color-hover:#48586a;--fs-color-base:#525956} /* Radius tokens (REQ-V2-0051): controls, content panels, product/media cards, circles. Rules: "Rounded corners" section. */ html:root{--zonemory-r-control:8px;--zonemory-r-panel:10px;--zonemory-r-card:12px;--zonemory-r-circle:999px} html body{font-family:Jost,Arial,sans-serif;color:#525956;background:#fff} html body :is(h1,h2,h3,h4,h5,h6,.heading-font,.alt-font,.button,button,input,select,textarea,label,legend,.nav>li>a){font-family:Jost,Arial,sans-serif} html body :is(h1,h2,h3,h4){color:#303b4c;font-weight:500;letter-spacing:-.02em} html body #wrapper{box-shadow:none} html body .page-wrapper{padding-top:40px;padding-bottom:60px} html body .entry-header .entry-title{font-size:clamp(32px,3vw,46px);text-transform:none;letter-spacing:-.03em} html body .is-divider{display:none} html body :is(.button.primary,.button.alt,.checkout-button,#place_order,.single_add_to_cart_button,button[type=submit].button,.woocommerce-button,.woocommerce-Button){background-color:#303b4c;border-color:#303b4c;color:#fff;text-transform:none;letter-spacing:.01em;font-weight:500;border-radius:var(--zonemory-r-control)} html body :is(.button.primary,.button.alt,.checkout-button,#place_order,.single_add_to_cart_button,.woocommerce-button,.woocommerce-Button):hover{background-color:#48586a;color:#fff} html body :is(input,select,textarea):focus-visible,html body :is(a,button,summary):focus-visible{outline:2px solid #658481;outline-offset:3px} html body .woocommerce-breadcrumb,html body .shop-page-title{display:none} /* ---- Header / footer adjustments for native links ---- */ .zonemory-app .desktop-nav a{padding:13px 0;font-size:16px} .zonemory-app .desktop-nav a:hover{box-shadow:inset 0 -1px var(--ink)} .zonemory-app .header-actions .icon-button{color:var(--ink)} .zonemory-app .zonemory-menu-panel>a{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;padding:17px 10px;border-bottom:1px solid var(--line);font-size:16px;min-height:60px} .zonemory-app .zonemory-menu-panel>a:hover{background:#f5f6f3} .zonemory-app .zonemory-menu-panel>a.zonemory-menu-more{font-size:12px;padding-block:12px;min-height:44px;border-bottom:0} .zonemory-app .mega-links .zonemory-menu-panel h2{font-size:26px;margin-bottom:26px} .zonemory-app .footer-grid nav a{display:block;font-size:14px;margin-bottom:10px} .zonemory-app .zonemory-footer-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center} .zonemory-app .zonemory-footer-actions a,.zonemory-app .zonemory-footer-actions button{text-decoration:underline;font-size:12px;min-height:24px} .zonemory-app .mobile-dialog .zonemory-drawer-link{display:block;border-top:1px solid var(--line);width:100%;text-align:left;padding:18px 0;font-size:15px} .zonemory-app .search-dialog form{margin:0} .zonemory-app .skip-link{position:fixed} @media(max-width:760px){.zonemory-app .header-actions .zonemory-account-link{display:none}} /* ---- Currency selector (REQ-V2-0106): header on desktop, end of the mobile navigation below 1101px ---- */ .zonemory-app .zonemory-currency{position:relative} .zonemory-app .zonemory-currency>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 10px;border-radius:22px;font-size:14px;letter-spacing:.02em;color:var(--ink);white-space:nowrap} .zonemory-app .zonemory-currency>summary::-webkit-details-marker{display:none} .zonemory-app .zonemory-currency>summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)} .zonemory-app .zonemory-currency[open]>summary::after{transform:translateY(1px) rotate(-135deg)} .zonemory-app .zonemory-currency>summary:hover{background:#f0f2ee} .zonemory-app .zonemory-currency>summary:focus-visible,.zonemory-app .zonemory-currency button:focus-visible{outline:2px solid #658481;outline-offset:2px} .zonemory-app .zonemory-currency-menu{margin:0;padding:14px;background:#fff;color:var(--text)} .zonemory-app .zonemory-currency-header .zonemory-currency-menu{position:absolute;right:0;left:auto;top:calc(100% + 6px);z-index:60;box-sizing:border-box;width:min(360px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);overflow-x:hidden;overflow-y:auto;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px #1e293b1f} .zonemory-app .zonemory-currency-title{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5d625f} .zonemory-app .zonemory-currency ul{list-style:none;margin:0;padding:0} .zonemory-app .zonemory-currency li{margin:0 0 4px;min-width:0} .zonemory-app .zonemory-currency li small{display:block;padding:0 12px 6px;font-size:12px;color:#7a4b3f;white-space:normal;overflow-wrap:break-word} .zonemory-app .zonemory-currency button{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;margin:0;padding:8px 12px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font-size:15px;line-height:1.35;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;cursor:pointer} .zonemory-app .zonemory-currency button>:not(.zonemory-currency-code){flex:1 1 auto;min-width:0;overflow-wrap:break-word} .zonemory-app .zonemory-currency button:hover:not(:disabled){background:#f5f6f3} .zonemory-app .zonemory-currency button[aria-pressed=true]{border-color:var(--ink);font-weight:600} .zonemory-app .zonemory-currency button:disabled{color:#8a8d88;cursor:not-allowed} .zonemory-app .zonemory-currency-code{flex:0 0 auto;min-width:36px;font-weight:600} .zonemory-app .zonemory-currency-note{margin:8px 0 0;font-size:13px;color:#7a4b3f;overflow-wrap:break-word} .zonemory-app .zonemory-currency-help{margin:10px 0 0;font-size:12px;line-height:1.5;color:#5d625f;overflow-wrap:break-word} .zonemory-app .mobile-dialog .zonemory-currency{border-top:1px solid var(--line);box-sizing:border-box;max-width:100%;min-width:0} .zonemory-app .mobile-dialog .zonemory-currency>summary{padding:18px 0;border-radius:0;font-size:15px;justify-content:flex-start} .zonemory-app .mobile-dialog .zonemory-currency>summary::after{margin-left:auto} .zonemory-app .mobile-dialog .zonemory-currency-menu{position:static;left:auto;right:auto;box-sizing:border-box;width:100%;max-width:100%;padding:0 0 16px;overflow-x:hidden} @media(max-width:1100px){.zonemory-app .header-actions .zonemory-currency-header{display:none}} /* ---- Homepage hero: illustrations are non-interactive (single CTA) ---- */ .zonemory-app .hero-mini:hover img{transform:none} /* Love & milestones editorial CTA (REQ-V2-0039): dark button, one 0.4s shine per hover on hover-capable pointers. REQ-V2-0052: every category CTA in the personalized feature cluster uses the same button. */ .zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link){position:relative;isolation:isolate;overflow:hidden;gap:14px;min-height:48px;padding:14px 26px;border:0;background:var(--ink);color:#fff;font-size:15px;font-weight:500;transition:background-color .2s ease} .zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-120%)} .zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link):is(:hover,:focus-visible){color:#fff} @media(hover:hover) and (pointer:fine){.zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link):hover{background:#48586a}.zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link):hover::after{animation:zonemory-cta-shine .4s ease-out 1 forwards}} @keyframes zonemory-cta-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}} @media(prefers-reduced-motion:reduce){.zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link)::after{display:none}} /* ---- Catalog filter links (native category URLs) ---- */ .zonemory-app .catalog-filters a{display:inline-flex;align-items:center;border:1px solid #dfe3da;border-radius:24px;padding:9px 16px;font-size:13px;min-height:40px} .zonemory-app .catalog-filters a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)} .zonemory-app .catalog-filters a:hover:not([aria-current=page]){background:var(--sage)} .zonemory-app .product-card[hidden]{display:none} @media(max-width:1100px){.zonemory-app .catalog-filters a{font-size:12px;padding:8px 12px}} @media(max-width:760px){.zonemory-app .catalog-filters a{font-size:11px;padding:8px 12px}} /* ---- Product page: EPO form styled as the approved customizer ---- */ .zonemory-app .zonemory-notices:empty{display:none} .zonemory-app .zonemory-notices .woocommerce-error,.zonemory-app .zonemory-notices .woocommerce-message,.zonemory-app .zonemory-notices .woocommerce-info{list-style:none;padding:14px 18px;margin:0 0 18px;border-left:3px solid #a54637;background:#fbf2ef;font-size:14px} .zonemory-app .zonemory-notices .woocommerce-message{border-left-color:#637459;background:#f1f4ed} .zonemory-app .zonemory-notices .message-icon{display:none} .zonemory-app .zonemory-buy form.cart{margin:0} .zonemory-app .tm-extra-product-options{margin:0 0 6px;counter-reset:zonemorysection} .zonemory-app .tm-extra-product-options ul{list-style:none;margin:0;padding:0} .zonemory-app .tm-extra-product-options li{margin:0} .zonemory-app .zonemory-epo-section{counter-increment:zonemorysection;margin-bottom:22px} .zonemory-app .zonemory-epo-section .tm-section-label{display:block;border-top:1px solid var(--line);padding:24px 0 17px;margin:0;font-size:18px;font-weight:500;color:var(--ink);letter-spacing:0} .zonemory-app .zonemory-epo-section .tm-section-label::before{content:"0" counter(zonemorysection);font-size:12px;color:#87957e;margin-right:13px} .zonemory-app .zonemory-epo-section .tm-section-description,.zonemory-app .zonemory-epo-section .tc-section-subtitle{background:#f1f4ed;border-left:2px solid #b9c4b0;padding:11px 14px;font-size:12px;line-height:1.5;margin:0 0 18px} .zonemory-app .tm-epo-element-label{display:block;font-size:14px;font-weight:400;color:var(--ink);margin:0 0 6px;letter-spacing:0} .zonemory-app .tm-epo-required{color:#7b826e;margin-left:4px} .zonemory-app .tm-element-description{font-size:10px;color:var(--muted);order:3;margin-top:4px} .zonemory-app .zonemory-f-div{margin-bottom:17px} .zonemory-app .zonemory-f-palette-div .tm-epo-element-label,.zonemory-app .zonemory-f-size-div .tm-epo-element-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .zonemory-app .tm-extra-product-options :is(input[type=text],select){display:block;width:100%;border:1px solid #c7ccc1;background-color:#fff;border-radius:var(--zonemory-r-control);padding:12px 14px;min-height:49px;font-size:16px;color:var(--ink)} .zonemory-app .tm-extra-product-options select{padding-right:2em} .zonemory-app .tm-extra-product-options :is(input[type=text],select):hover{border-color:#7e8c72} .zonemory-app .tm-extra-product-options :is(input,select)[aria-invalid=true],.zonemory-app .tm-extra-product-options .tm-error{border-color:#a54637} .zonemory-app .tm-extra-product-options label.tm-error,.zonemory-app .tm-extra-product-options .tm-error.tc-cell{color:#a54637;font-size:12px;border:0} /* Palette swatches */ .zonemory-app .zonemory-f-palette-ul{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px} .zonemory-app :is(.zonemory-f-palette-ul,.zonemory-f-size-ul) li{position:relative;width:auto!important;float:none!important;padding:0!important} .zonemory-app :is(.zonemory-f-palette-ul,.zonemory-f-size-ul) input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0} .zonemory-app .zonemory-f-palette-ul label{display:flex;flex-direction:column;align-items:center;cursor:pointer;text-align:center;font-size:10px;line-height:1.4;padding:0} .zonemory-app .zonemory-f-palette-ul .tc-label-text{display:flex;flex-direction:column;align-items:center;gap:9px} .zonemory-app .zonemory-f-palette-ul .tc-label-text::before{content:"";display:block;width:43px;height:43px;border:1px solid #ccc;border-radius:50%;outline-offset:4px;background:linear-gradient(145deg,var(--sw) 55%,var(--dt) 55%)} .zonemory-app .zonemory-f-palette-ul li:has(input[value^="coast_"]){--sw:#ffffff;--dt:#9cbec6} .zonemory-app .zonemory-f-palette-ul li:has(input[value^="ivory_"]){--sw:#f7f2e8;--dt:#c0c7bf} .zonemory-app .zonemory-f-palette-ul li:has(input[value^="navy_"]){--sw:#29394c;--dt:#202e40} .zonemory-app .zonemory-f-palette-ul li:has(input[value^="sage_"]){--sw:#f8f8f1;--dt:#abc6c3} .zonemory-app .zonemory-f-palette-ul li:has(input[value^="rose_"]){--sw:#fcf5ef;--dt:#bdcbd0} .zonemory-app .zonemory-f-palette-ul li:has(input:checked) .tc-label-text::before{outline:1px solid var(--ink)} .zonemory-app .zonemory-f-palette-ul li:has(input:focus-visible) .tc-label-text::before{outline:3px solid #658481} /* Size cards */ .zonemory-app .zonemory-f-size-ul{display:grid!important;grid-template-columns:1fr 1fr;gap:12px} .zonemory-app .zonemory-f-size-ul label{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #cbd1c5;padding:16px 18px;cursor:pointer;width:100%;min-height:56px} .zonemory-app .zonemory-f-size-ul li:has(input:checked) label{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#f4f6f0} .zonemory-app .zonemory-f-size-ul li:has(input:focus-visible) label{outline:2px solid #658481;outline-offset:3px} .zonemory-app .zonemory-f-size-ul .tc-label-text{font-size:16px;font-weight:500;color:var(--ink)} .zonemory-app .zonemory-f-size-ul .tc-price,.zonemory-app .zonemory-f-size-ul .price{font-size:12px;color:var(--text)} .zonemory-app .zonemory-buy-ready .zonemory-f-size-ul{grid-template-columns:1fr} /* EPO totals and add to cart */ .zonemory-app .tc-epo-totals{font-size:14px;margin:6px 0 18px;color:var(--text)} .zonemory-app .tc-epo-totals dl,.zonemory-app .tm-extra-product-options-totals dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;border-top:1px solid var(--line);padding-top:14px} .zonemory-app .tc-epo-totals .amount{color:var(--ink)} .zonemory-app .zonemory-buy form.cart>.quantity,.zonemory-app .zonemory-buy form.cart>.ux-quantity{display:inline-flex;align-items:stretch;border:1px solid #c7ccc1;margin:0 10px 12px 0;vertical-align:middle} .zonemory-app .zonemory-buy form.cart>.quantity,.zonemory-app .zonemory-buy form.cart>.ux-quantity{flex-wrap:nowrap;padding:0;white-space:nowrap} .zonemory-app .zonemory-buy form.cart>.ux-quantity input[type=button],.zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity) input.qty{box-sizing:border-box;flex:0 0 48px;width:48px;min-width:48px;max-width:48px;height:52px;min-height:52px;margin:0;padding:0;line-height:50px;text-align:center;text-indent:0;vertical-align:middle;border-radius:0;box-shadow:none;color:inherit} .zonemory-app .zonemory-buy form.cart>.ux-quantity input[type=button]{display:block;font-size:18px;cursor:pointer;background:#fff;border:0!important} .zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity) input.qty{display:block;font-size:16px;border:0;border-inline:1px solid #e1e3df;-moz-appearance:textfield;appearance:textfield} .zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity) input.qty::-webkit-outer-spin-button,.zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity) input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .zonemory-app .zonemory-buy .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 30px;background:var(--ink);color:#fff;font-size:16px;border:1px solid var(--ink);vertical-align:middle;margin-bottom:12px} .zonemory-app .zonemory-buy .single_add_to_cart_button:hover{background:#48586a} .zonemory-app .zonemory-buy .tm-cart-edit-options,.zonemory-app .zonemory-buy .reset_variations{font-size:12px} .zonemory-app .review-controls{margin-top:10px} .zonemory-app .review-controls .review-button{background:#fff;color:var(--ink)} .zonemory-app .review-controls .review-button:hover{background:#f0f2eb;color:var(--ink)} .zonemory-app .zonemory-review-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .zonemory-app #live-art>img{width:auto;max-width:100%;max-height:570px;height:calc(min(650px,72vh) - 70px);box-shadow:3px 6px 14px #262e2826} .zonemory-app #live-art.landscape>img{width:100%;height:auto} .zonemory-app .in-room #live-art>img{height:auto;width:100%;max-height:none;box-shadow:none} .zonemory-app .view-larger{text-decoration:underline} .zonemory-app .ready-detail-copy .zonemory-buy{margin:22px 0} .zonemory-app .ready-detail-copy>.zonemory-ready-info-hidden{display:none} @media(max-width:1100px){.zonemory-app .zonemory-f-palette-ul{gap:5px}.zonemory-app .zonemory-f-palette-ul .tc-label-text::before{width:36px;height:36px}.zonemory-app .zonemory-f-size-ul label{display:block}} @media(max-width:760px){.zonemory-app .zonemory-f-palette-ul{gap:8px}.zonemory-app .zonemory-f-palette-ul .tc-label-text::before{width:43px;height:43px}.zonemory-app .zonemory-f-size-ul label{display:flex;padding:16px}.zonemory-app #live-art>img{height:370px;max-height:100%}.zonemory-app .zonemory-buy .single_add_to_cart_button{width:100%}} @media(max-width:370px){.zonemory-app .zonemory-f-palette-ul .tc-label-text::before{width:35px;height:35px}.zonemory-app .zonemory-f-size-ul{grid-template-columns:1fr}} /* ---- Shared purchase options (REQ-V2-0029/0030, layout REQ-V2-0039): Material / Size / Frame / Finish cards, Extras rows ---- EPO puts the builder classes on the inputs (.zonemory-cf, .zonemory-x) and their "-ul" variants on the choice list. Every rule is scoped to one native choice wrapper (ul.zonemory-cf-ul / ul.zonemory-x-ul > li.tmcp-field-wrap, one input each); the outer EPO form li contains every field, so it must never be matched. */ .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;flex:1 1 100%;width:100%} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-material-ul,.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul{grid-template-columns:repeat(2,minmax(0,1fr))} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap{display:flex;align-items:stretch;position:relative;width:auto!important;float:none!important;padding:0!important;margin:0;min-width:0} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap :is(.tmcp-field-wrap-inner,.tc-field-label-wrap){display:flex;flex:1 1 auto;align-items:stretch;width:100%;min-width:0;gap:0} /* The whole card is the native label, so text and blank space both operate its own radio. */ .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap label.tm-epo-field-label{position:relative;display:flex;flex:1 1 auto;align-self:stretch;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;margin:0;padding:10px 8px;border:1px solid #cbd1c5;background:#fff;cursor:pointer;text-align:center;opacity:1} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap :is(.tc-label-wrap,.tc-label,.tc-label-inner){display:flex;flex:1 1 auto;align-items:center;justify-content:center;min-width:0;max-width:100%;gap:0} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap .tc-input-wrap{position:absolute;left:0;top:0} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap .tc-epo-style-space::after{display:none} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap input.zonemory-cf[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap .tc-label-text{display:block;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink);text-align:center} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-size-ul>li.tmcp-field-wrap .tc-label-text{white-space:nowrap} /* Option names only; the dynamic Options amount / Final total below the form still shows every surcharge. */ .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap .tc-price-wrap{display:none} @media(hover:hover){.zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap:has(input.zonemory-cf:enabled:not(:checked)) label.tm-epo-field-label:hover{border-color:#7e8c72}} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap:has(input.zonemory-cf:checked) label.tm-epo-field-label{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#f4f6f0} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap:has(input.zonemory-cf:focus-visible) label.tm-epo-field-label{outline:2px solid #658481;outline-offset:3px} .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap:has(input.zonemory-cf:disabled) label.tm-epo-field-label{opacity:.45;cursor:not-allowed} /* REQ-V2-0194, REQ-V2-0197: one deep orange-brown "Hot!" pill raised over the Canvas card's top-left edge (the New! reference); decorative only (no clicks), it never sizes the card. The material row leaves room above for the raised half. REQ-V2-0199: the type is pinned to the site font so nothing inherited from the EPO label can change it. */ .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-material-ul:has(input.zonemory-cf[value^="canvas"]){padding-top:16px} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-material-ul>li.tmcp-field-wrap:has(input.zonemory-cf[value^="canvas"]) label.tm-epo-field-label::after{content:"Hot!";position:absolute;top:0;left:8px;z-index:1;transform:translateY(-50%);padding:6px 13px;border-radius:999px;background:#b84408;color:#fff;font-family:Jost,Arial,sans-serif;font-size:17px;font-style:normal;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none} /* Extras: checkbox · name + surcharge · underlined "learn more" right; the checkbox label already names each item. */ .zonemory-app .zonemory-x-div{margin-bottom:0} .zonemory-app .zonemory-x-div .tm-epo-element-label{display:none} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul{flex:1 1 100%;width:100%} /* REQ-V2-0108: a compact flat list (no row rules, no card): small rows, 16px boxes, 14px names with the amount inline. */ .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap{display:flex!important;flex-wrap:nowrap;align-items:center;gap:10px;width:100%!important;float:none!important;padding:4px 0!important;margin:0;border-bottom:0} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap :is(.tmcp-field-wrap-inner,.tc-field-label-wrap){display:flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;gap:0} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap label.tm-epo-field-label{display:flex;flex:1 1 auto;align-self:stretch;align-items:center;min-width:0;min-height:28px;margin:0;padding:0;border:0;background:none;cursor:pointer} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap .tc-label-wrap{display:flex;flex:1 1 auto;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap .tc-label{flex:1 1 auto;min-width:0} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap .tc-label-inner{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;min-width:0} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap .tc-epo-style-space::after{display:none} .zonemory-app .zonemory-x[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--ink)} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap .tc-label-text{display:inline;font-size:14px;font-weight:400;line-height:1.35;color:var(--ink);overflow-wrap:break-word} .zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap :is(.tc-price,.price){font-size:13px;color:var(--ink);font-weight:500;white-space:nowrap} .zonemory-app .zonemory-learn-more{flex:0 0 auto;margin-left:auto;background:none;border:0;padding:2px 0;min-height:28px;font-size:12.5px;line-height:1.3;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .zonemory-app .zonemory-learn-more:hover{color:#48586a} .zonemory-app .zonemory-learn-more:focus-visible{outline:2px solid #658481;outline-offset:2px} .zonemory-app .zonemory-x-message{display:block;width:100%;min-height:64px;border:1px solid #c7ccc1;border-radius:var(--zonemory-r-control);padding:8px 12px;font-size:16px;color:var(--ink);resize:vertical} .zonemory-app .zonemory-info-dialog{max-width:min(520px,calc(100vw - 32px));width:100%;overflow-wrap:anywhere} .zonemory-app .zonemory-info-dialog h2{font-size:22px;margin:0 40px 14px 0} .zonemory-app .zonemory-info-dialog p{font-size:15px;line-height:1.6;margin:0} @media(max-width:480px){.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-size-ul{grid-template-columns:repeat(2,minmax(0,1fr))}.zonemory-app .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap{gap:8px}} /* Frame / Finish (REQ-V2-0040): Classic, Premium, None (zonemory-site.js moves the native None wrapper last) in one equal row of white rounded buttons; finishes as local corner photos (150px originals, about 64px shown) with names beneath. The finish layout applies only once zonemory-site.js has enhanced a wrapper (.zonemory-finish-ready); until then the text cards remain. The 3px swatch border is always reserved (transparent), so selecting never moves anything. */ .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap label.tm-epo-field-label{border-radius:var(--zonemory-r-control);background:#fff;padding:10px 6px} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap:has(input.zonemory-cf:checked) label.tm-epo-field-label{background:#fff} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap .tc-label-text{overflow-wrap:break-word} /* REQ-V2-0042: when Classic/Premium wrap to two lines (320px), every Frame button fills the shared grid row, None included. */ .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul{align-items:stretch} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap{align-self:stretch;height:auto!important} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap :has(label.tm-epo-field-label){display:flex;flex:1 1 auto;align-self:stretch;align-items:stretch;width:100%;min-width:0;height:auto} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap label.tm-epo-field-label{align-self:stretch;height:auto} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul:has(>li.zonemory-finish-ready){grid-template-columns:repeat(4,minmax(0,84px));justify-content:start;gap:10px} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.tmcp-field-wrap.zonemory-finish-ready:has(input.zonemory-cf) label.tm-epo-field-label{align-items:flex-start;padding:0 0 2px;border:0;border-radius:0;background:none;box-shadow:none;outline:0} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready .tc-label-inner{flex-direction:column;justify-content:flex-start;gap:6px;width:100%} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready .tc-label-text{display:none} .zonemory-app .tm-extra-product-options .zonemory-finish-swatch{display:block;flex:0 0 auto;width:min(70px,100%);height:auto;max-width:100%;aspect-ratio:1/1;object-fit:contain;margin:0;padding:0;border:3px solid transparent;border-radius:var(--zonemory-r-control);box-sizing:border-box;background:#fff} .zonemory-app .tm-extra-product-options .zonemory-finish-name{display:block;max-width:100%;font-size:13px;font-weight:400;line-height:1.3;color:var(--ink);text-align:center;overflow-wrap:break-word} @media(hover:hover){.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready:has(input.zonemory-cf:enabled:not(:checked)) label:hover .zonemory-finish-swatch{border-color:#c7ccc1}} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready:has(input.zonemory-cf:checked) .zonemory-finish-swatch{border-color:var(--ink)} .zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready:has(input.zonemory-cf:focus-visible) .zonemory-finish-swatch{outline:2px solid #658481;outline-offset:2px} /* REQ-V2-0041: once the finish photos exist, its "… Frame finish" heading stays only for assistive tech (labels, required validation and error messages untouched) and the photo row sits about 20px under the Frame buttons. */ .zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-finish-div:has(ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready)>.tc-element-inner-wrap>.tc-row>h3.tc-epo-label{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-finish-div:has(ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready){margin-top:0!important;padding-top:0!important} .zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-finish-div:has(ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready)>.tc-element-inner-wrap,.zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-finish-div:has(ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready)>.tc-element-inner-wrap>.tc-row{margin-top:0!important;padding-top:0!important} .zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-frame-div:has(~.cpf-element.zonemory-f-opt-finish-div:not(.tc-hidden) ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready){margin-bottom:5px!important;padding-bottom:0!important} .zonemory-app .tm-extra-product-options .cpf-element.zonemory-f-opt-frame-div:has(~.cpf-element.zonemory-f-opt-finish-div:not(.tc-hidden) ul.zonemory-f-opt-finish-ul>li.zonemory-finish-ready)>.tc-element-inner-wrap{margin-bottom:0!important;padding-bottom:0!important} @media(max-width:480px){.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap label.tm-epo-field-label{padding:8px 4px}.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-frame-ul>li.tmcp-field-wrap .tc-label-text{font-size:14px}.zonemory-app .tm-extra-product-options ul.zonemory-f-opt-finish-ul:has(>li.zonemory-finish-ready){gap:8px}} /* Local format preview (REQ-V2-0034): the fixed artwork is shown whole inside the selected size's format (contain: never stretched or cropped). Personalized previews get the same mat from zonemory-personalizer.js. */ .zonemory-app .ready-detail-art>img[data-zonemory-format]{aspect-ratio:var(--zonemory-r);object-fit:contain;width:min(100%,calc(650px * var(--zonemory-r)));height:auto;max-height:none;background:#fbfaf7;outline:1px solid #dcdcd2;outline-offset:-1px} .zonemory-app .zonemory-format-note{display:block;font-size:11px;line-height:1.4;color:var(--muted);text-align:center;max-width:34em} .zonemory-app .zonemory-format-note[hidden]{display:none} @media(max-width:760px){.zonemory-app .ready-detail-art>img[data-zonemory-format]{width:min(100%,calc(480px * var(--zonemory-r)))}} .zonemory-app :is(#live-art,#review-art,#large-art) .zonemory-format-svg>svg{width:100%;height:100%;max-width:none;max-height:none} /* Estimated US delivery below Add to cart (REQ-V2-0044): intro, three equal steps joined by fine rules, footnotes. Dates may wrap (never clipped); the rule spans the gap between neighbouring icons. */ .zonemory-app .zonemory-delivery{margin:6px 0 22px;padding:18px 0 2px;border-top:1px solid var(--line);text-align:left} .zonemory-app .zonemory-delivery-intro{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ink)} .zonemory-app .zonemory-delivery-intro strong{font-weight:600;color:var(--ink)} .zonemory-app .zonemory-delivery-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0 0 16px;padding:0} .zonemory-app .zonemory-delivery-steps>li{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:0 4px;text-align:center} .zonemory-app .zonemory-delivery-steps>li:not(:last-child)::after{content:"";position:absolute;top:20px;left:calc(50% + 30px);width:calc(100% - 60px);border-top:1px solid #c7ccc1} .zonemory-app .zonemory-delivery-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink)} .zonemory-app .zonemory-delivery-icon svg{display:block;width:30px;height:30px} .zonemory-app .zonemory-delivery-date{display:block;max-width:100%;margin-top:10px;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);overflow-wrap:anywhere} .zonemory-app .zonemory-delivery-label{display:block;max-width:100%;margin-top:4px;font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow-wrap:break-word} .zonemory-app .zonemory-delivery-note{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--muted)} .zonemory-app .zonemory-delivery-note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} @media(max-width:480px){.zonemory-app .zonemory-delivery-steps>li{padding:0 2px}.zonemory-app .zonemory-delivery-steps>li:not(:last-child)::after{top:17px;left:calc(50% + 24px);width:calc(100% - 48px)}.zonemory-app .zonemory-delivery-icon{width:34px;height:34px}.zonemory-app .zonemory-delivery-icon svg{width:26px;height:26px}.zonemory-app .zonemory-delivery-date{font-size:13px}.zonemory-app .zonemory-delivery-label{font-size:9.5px;letter-spacing:.05em}} /* Detail layout balance (REQ-V2-0045): Products (.ready-detail) and Personalized (.personalizer) detail pages only. Desktop: top-aligned 58/42 columns; the artwork sits in a near-square area sized from its own column (container units), so a long option form never stretches the preview. Art stays whole: the format mat (data-zonemory-format / --zonemory-r) and the portrait/landscape rules keep their proportions; In a room keeps its 3:2 stage. One-column mobile breakpoint unchanged. */ @media(min-width:761px){ .zonemory-app .ready-detail,.zonemory-app .personalizer{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:36px;align-items:start} .zonemory-app .ready-detail-copy{max-width:none} /* REQ-V2-0046: cap the detail section so the 58% column fits the 700px/680px preview caps; keeps the 36px visual gap on wide screens. */ .zonemory-app .ready-detail,.zonemory-app .personalizer{max-width:1200px;margin-inline:auto} } @media(min-width:761px) and (max-width:1100px){.zonemory-app .ready-detail,.zonemory-app .personalizer{gap:32px}} .zonemory-app .ready-detail .ready-detail-art{container-type:inline-size;max-width:700px;margin-inline:auto;padding:32px;gap:14px} .zonemory-app .ready-detail .ready-detail-art>img{max-height:min(100cqi,640px)} .zonemory-app .ready-detail .ready-detail-art>img[data-zonemory-format]{width:min(100%,calc(min(100cqi,640px) * var(--zonemory-r)));max-height:none} .zonemory-app .personalizer .preview-stage{container-type:inline-size;max-width:680px;margin-inline:auto} .zonemory-app .personalizer .preview-stage:not(.in-room){height:auto;min-height:0;aspect-ratio:1/1} .zonemory-app .personalizer .preview-stage:not(.in-room) .live-art:not(.landscape) svg{height:100cqi;max-height:100cqi} .zonemory-app .personalizer .preview-stage:not(.in-room) .live-art.landscape svg{max-height:100cqi} .zonemory-app .personalizer .preview-stage:not(.in-room) #live-art:not(.landscape)>img{height:100cqi;max-height:100cqi} .zonemory-app .personalizer .preview-stage:not(.in-room) #live-art.landscape>img{max-height:100cqi} /* Information column: 28-32px title, 16px option headings, 15px option text, tighter section rhythm. */ .zonemory-app .ready-detail .ready-detail-copy h1,.zonemory-app .personalizer .customizer h1{font-size:clamp(28px,2.5vw,32px);line-height:1.15;margin:8px 0 12px} .zonemory-app .personalizer .price-line{margin-bottom:20px} .zonemory-app .personalizer .customizer fieldset{margin-bottom:20px} .zonemory-app .personalizer .customizer legend{font-size:16px;padding:16px 0 12px} .zonemory-app .ready-detail-copy .zonemory-buy{margin:18px 0} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section{margin-bottom:16px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section .tm-section-label{font-size:16px;padding:16px 0 12px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options :is(.tm-epo-element-label,h3.tc-epo-label){font-size:16px;line-height:1.3;margin:0 0 8px;padding:0} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options .cpf-element:is(.zonemory-f-opt-material-div,.zonemory-f-opt-size-div,.zonemory-f-opt-frame-div){margin-bottom:16px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-f-div{margin-bottom:14px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-cf-ul{gap:8px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap label.tm-epo-field-label{min-height:42px;padding-block:8px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap{padding:4px 0!important} /* REQ-V2-0108: compact Extras heading and gift message, matching the cart Edit options list. */ .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section:has(.zonemory-x-div) .tm-section-label{font-size:14px;font-weight:600;line-height:1.3;padding:10px 0 4px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options .zonemory-x-message-div h3.tc-epo-label{font-size:13px;margin:6px 0 4px} @media(max-width:760px){ .zonemory-app .ready-detail .ready-detail-art{padding:20px} .zonemory-app .ready-detail .ready-detail-art>img{max-height:min(100cqi,480px)} .zonemory-app .ready-detail .ready-detail-art>img[data-zonemory-format]{width:min(100%,calc(min(100cqi,480px) * var(--zonemory-r)))} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap label.tm-epo-field-label{min-height:44px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap label.tm-epo-field-label,.zonemory-app :is(.ready-detail,.personalizer) .zonemory-learn-more{min-height:40px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap{padding:0!important} } /* Product gallery (REQ-V2-0048), Products and Personalized detail pages: a square main view (Full artwork / In a room / Close-up detail) with previous/next arrows, a bottom-left enlarge icon and a thumbnail row beneath. Views stack in the square and only the active one is visible; inactive views stay laid out so zonemory-site.js can measure the artwork ratio. --zonemory-gr is the artwork's own width/height (selected size format included); every copy is shown whole (contain). */ .zonemory-app .zonemory-gallery{width:100%;min-width:0;max-width:700px;margin-inline:auto} .zonemory-app .personalizer .zonemory-gallery{max-width:680px} .zonemory-app .zonemory-g-main{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#eeeee7;touch-action:pan-y pinch-zoom} .zonemory-app .zonemory-g-view{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s} .zonemory-app .zonemory-g-view.is-active{visibility:visible;opacity:1;transition:opacity .25s} .zonemory-app .zonemory-g-view[data-zonemory-gopen]{cursor:zoom-in} @media(prefers-reduced-motion:reduce){.zonemory-app .zonemory-g-view,.zonemory-app .zonemory-g-view.is-active{transition:none}} /* Full artwork: the original preview nodes fill the square; artwork contained, never cropped. */ .zonemory-app .zonemory-gallery .zonemory-g-view>.ready-detail-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0} .zonemory-app .personalizer .zonemory-gallery .zonemory-g-view>.preview-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;aspect-ratio:auto;margin:0} .zonemory-app .zonemory-gallery .preview-stage .preview-room{display:none} .zonemory-app .zonemory-gallery .zonemory-format-note{display:none} .zonemory-app .view-switch[hidden]{display:none} /* Id-free copies of the artwork (fits); a square parent is the size container. */ .zonemory-app .zonemory-g-fit{position:relative;display:block;aspect-ratio:var(--zonemory-gr);width:min(100%,calc(100cqi * var(--zonemory-gr)))} .zonemory-app .zonemory-g-fit>*{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;box-shadow:none;filter:none} .zonemory-app .zonemory-g-fit>img{object-fit:contain} .zonemory-app .zonemory-g-fit .zonemory-format-svg>svg{display:block;width:100%;height:100%;max-width:none;max-height:none} .zonemory-app .zonemory-g-mat .zonemory-g-fit{background:#fbfaf7;outline:1px solid #dcdcd2;outline-offset:-1px} /* In a room: the existing illustrative room, artwork centred on the wall, no frame shown. */ .zonemory-app .zonemory-g-room{overflow:hidden;background:#e6e2d8} .zonemory-app .zonemory-g-room-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover} .zonemory-app .zonemory-g-wall{position:absolute;left:50%;top:9%;display:block;aspect-ratio:var(--zonemory-gr);width:min(66%,calc(60% * var(--zonemory-gr)));transform:translateX(-50%);box-shadow:3px 6px 14px #262e2833} .zonemory-app .zonemory-g-land .zonemory-g-wall{top:15%} .zonemory-app .zonemory-g-wall>.zonemory-g-fit{width:100%;height:100%} /* Close-up detail: the same artwork magnified about its centre. */ .zonemory-app .zonemory-g-detail{overflow:hidden;background:#eeeee7;container-type:inline-size} .zonemory-app .zonemory-g-detail>.zonemory-g-fit{position:absolute;left:50%;top:50%;width:min(88%,calc(88cqi * var(--zonemory-gr)));transform:translate(-50%,-50%) scale(2.4)} /* Controls: Zonemory ink on white circles. */ .zonemory-app .zonemory-gallery :is(.zonemory-g-step,.zonemory-g-enlarge){position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;background:#fffffff2;color:var(--ink);box-shadow:0 2px 8px #262e2814;text-decoration:none;cursor:pointer} .zonemory-app .zonemory-gallery :is(.zonemory-g-step,.zonemory-g-enlarge) svg{display:block;width:20px;height:20px} .zonemory-app .zonemory-gallery :is(.zonemory-g-step,.zonemory-g-enlarge):hover{background:var(--sage);color:var(--ink)} .zonemory-app .zonemory-gallery :is(.zonemory-g-step,.zonemory-g-enlarge,.zonemory-g-thumb):focus-visible{outline:2px solid #658481;outline-offset:2px} .zonemory-app .zonemory-gallery .zonemory-g-step{top:50%;transform:translateY(-50%)} .zonemory-app .zonemory-gallery .zonemory-g-step[data-zonemory-gstep="-1"]{left:12px} .zonemory-app .zonemory-gallery .zonemory-g-step[data-zonemory-gstep="1"]{right:12px} .zonemory-app .zonemory-gallery .zonemory-g-enlarge{left:12px;bottom:12px} /* Thumbnails: active view outlined in ink. */ .zonemory-app .zonemory-g-thumbs{display:flex;gap:16px;width:100%;margin:12px 0 0;padding:0;max-width:100%;box-sizing:border-box} .zonemory-app .zonemory-g-thumb{flex:1 1 0;min-width:0;box-sizing:border-box;margin:0;padding:3px;border:1px solid var(--line);background:#fff;cursor:pointer} .zonemory-app .zonemory-g-thumb:hover{border-color:#7e8c72} .zonemory-app .zonemory-g-thumb.is-active,.zonemory-app .zonemory-g-thumb[aria-current=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .zonemory-app .zonemory-g-thumb>span{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden} .zonemory-app .zonemory-g-thumb .zonemory-g-frame{display:flex;align-items:center;justify-content:center;padding:12%;background:#eeeee7;container-type:inline-size} .zonemory-app .zonemory-g-thumb .zonemory-g-wall{box-shadow:1px 2px 4px #262e2833} .zonemory-app .zonemory-g-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} @media(max-width:760px){ .zonemory-app .zonemory-gallery :is(.zonemory-g-step,.zonemory-g-enlarge){width:40px;height:40px;min-height:40px} .zonemory-app .zonemory-gallery .zonemory-g-step[data-zonemory-gstep="-1"],.zonemory-app .zonemory-gallery .zonemory-g-enlarge{left:8px} .zonemory-app .zonemory-gallery .zonemory-g-step[data-zonemory-gstep="1"]{right:8px} .zonemory-app .zonemory-gallery .zonemory-g-enlarge{bottom:8px} .zonemory-app .zonemory-g-thumbs{gap:8px;margin-top:10px} } /* ---- Consent dialog ---- */ .zonemory-app .consent-dialog{max-width:680px} .zonemory-app .zonemory-consent-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-top:1px solid var(--line);padding:16px 0} .zonemory-app .zonemory-consent-row h3{font-size:17px;margin:0 0 6px;letter-spacing:0} .zonemory-app .zonemory-consent-row p{font-size:13px;margin:0} .zonemory-app .zonemory-consent-row input[type=checkbox]{width:22px;height:22px;flex-shrink:0;accent-color:var(--ink);margin-top:2px} .zonemory-app .zonemory-consent-always{font-size:12px;white-space:nowrap;color:#637459} .zonemory-app .zonemory-consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 12px} .zonemory-app .zonemory-consent-actions .button{min-height:48px;padding:12px 18px;gap:12px;border:1px solid var(--ink)} .zonemory-app .zonemory-muted{font-size:12px;color:var(--muted)} /* ---- Policy and information pages ---- */ .zonemory-policy,.zonemory-info{max-width:900px;margin:0 auto;font-size:16px;line-height:1.7} .zonemory-policy h2,.zonemory-info h2{font-size:26px;margin:36px 0 14px} .zonemory-lead{font-size:19px;color:#303b4c} .zonemory-eyebrow{display:block;font-size:11px;letter-spacing:2px;margin-bottom:8px;color:#525956} .zonemory-policy-notice{background:#f1f4ed;border-left:3px solid #8b9a80;padding:18px 22px;margin:0 0 28px} .zonemory-policy-notice p{margin:0 0 8px} .zonemory-policy-notice a,.zonemory-info a,.zonemory-policy-actual a{text-decoration:underline} .zonemory-policy-actual{border:1px solid #e1e3df;padding:6px 24px 10px;margin-bottom:30px} .zonemory-policy-actual ul{padding-left:20px;list-style:disc} .zonemory-legacy{border-top:1px solid #e1e3df;padding-top:10px;margin-top:20px} .zonemory-legacy-title small{font-size:13px;color:#787c76;font-weight:400} .zonemory-legacy summary{cursor:pointer;font-size:17px;color:#303b4c;padding:14px 0} .zonemory-legacy-warning{background:#fbf2ef;border-left:3px solid #a54637;padding:12px 16px} .zonemory-legacy-body{color:#5d625f} .zonemory-legacy-body h3{font-size:18px;margin-top:22px} .zonemory-legacy-body table{font-size:14px} .zonemory-legacy-body .payment-card-logos{list-style:none;display:flex;gap:12px;padding:0} .zonemory-legacy-body .payment-card-logos img,.zonemory-legacy-body .payment-method-paypal-logo img{width:auto;height:32px} .zonemory-legacy-link{text-decoration:none;border-bottom:1px dotted #9aa093} .zonemory-table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:15px} .zonemory-table th,.zonemory-table td{border-bottom:1px solid #e1e3df;padding:10px 12px;text-align:left;vertical-align:top;text-transform:none;letter-spacing:0} .zonemory-table th{color:#303b4c;font-weight:500} .zonemory-facts{list-style:none;padding:0} .zonemory-facts li{margin-bottom:8px} .zonemory-accordion details{border-top:1px solid #e1e3df} .zonemory-accordion details:last-child{border-bottom:1px solid #e1e3df} .zonemory-accordion summary{cursor:pointer;padding:16px 4px;font-size:17px;color:#303b4c;min-height:44px} .zonemory-accordion details>div{padding:0 4px 12px} .zonemory-empty{text-align:center;background:#f5f3ed;padding:50px 24px} .zonemory-ack{background:#f1f4ed;border:1px solid #c9d3c0;padding:20px 24px;margin:0 0 24px} .zonemory-ack h2{margin-top:0} .zonemory-contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start} .zonemory-form{margin:0 0 30px} .zonemory-form fieldset{border:0;padding:0;margin:0 0 16px} .zonemory-form legend{font-weight:500;margin-bottom:8px;text-transform:none;font-size:16px;border:0} .zonemory-form fieldset label{display:inline-flex;align-items:center;gap:8px;margin-right:18px;font-weight:400} .zonemory-form-row{margin:0 0 14px} .zonemory-form-row label{display:block;font-weight:500;color:#303b4c;font-size:14px;margin-bottom:4px} .zonemory-form-row :is(input,textarea){width:100%;border:1px solid #c7ccc1;box-shadow:none;min-height:46px;margin:0} .zonemory-form-row :is(input,textarea)[aria-invalid=true]{border-color:#a54637} .zonemory-field-error{display:block;color:#a54637;font-size:13px;margin-top:4px} .zonemory-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .zonemory-company{background:#f5f3ed;padding:22px 24px} .zonemory-quote{display:grid;grid-template-columns:1fr auto;gap:6px 20px;max-width:420px;text-transform:none;font-size:15px;opacity:1} .zonemory-quote dt{color:#787c76}.zonemory-quote dd{margin:0;text-align:right} /* Contact Us (REQ-V2-0055) */ .zonemory-info-contact .zonemory-contact-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;margin-top:24px} .zonemory-info-contact .zonemory-contact-layout h2{margin-top:0;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#303b4c} .zonemory-info-contact .zonemory-form{background:#fff;border:1px solid #e1e3df;border-radius:var(--zonemory-r-card);padding:26px 28px} .zonemory-info-contact .zonemory-company{background:#f5f3ed;border-radius:var(--zonemory-r-card);padding:26px 28px} .zonemory-info-contact .zonemory-facts{margin:0} .zonemory-info-contact .zonemory-facts li{overflow-wrap:anywhere} .zonemory-captcha{margin:6px 0 18px;max-width:100%} @media(max-width:380px){.zonemory-captcha .g-recaptcha{transform:scale(.86);transform-origin:0 0;height:68px}} .zonemory-captcha-box{margin:0;padding:12px 14px;border:1px dashed #c7ccc1;border-radius:var(--zonemory-r-control);background:#f5f3ed;font-size:14px;line-height:1.5;color:#525956} .zonemory-captcha[aria-invalid=true] .zonemory-captcha-box{border-color:#a54637} .zonemory-contact-form .button{margin:0;min-height:46px;padding:0 28px} /* Contact reCAPTCHA (REQ-V2-0062): Submit waits for the checkbox; status is announced politely. */ .zonemory-captcha-status{margin:8px 0 0;font-family:Jost,Arial,sans-serif;font-size:14px;line-height:1.5;color:#525956} .zonemory-contact-form .button:disabled,.zonemory-contact-form .button[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:none} .zonemory-contact-unavailable :is(input,textarea){background:#f5f3ed} @media(max-width:760px){.zonemory-info-contact .zonemory-contact-layout{grid-template-columns:1fr;gap:24px}.zonemory-info-contact :is(.zonemory-form,.zonemory-company){padding:20px 18px}.zonemory-contact-form .button{width:100%}} @media(max-width:760px){.zonemory-contact-layout{grid-template-columns:1fr}.zonemory-policy,.zonemory-info{font-size:15px}.zonemory-table{font-size:13px}.zonemory-table th,.zonemory-table td{padding:8px 6px}} /* REQ-V2-0139: the live Contact wrapper is .zonemory-info-contact-us. On narrow screens the 1fr column grew to the CAPTCHA's 304px min-content; the column is capped to the content box and the scaled CAPTCHA occupies its visual 262px (304*.86). The message textarea is a multi-line field again (the 46px single-line min-height won before). */ .zonemory-info-contact-us .zonemory-contact-layout>*{min-width:0} @media(max-width:760px){.zonemory-info-contact-us .zonemory-contact-layout{grid-template-columns:minmax(0,1fr)}} @media(max-width:380px){.zonemory-info-contact-us .zonemory-captcha .g-recaptcha{width:262px;max-width:100%}} .zonemory-info-contact-us .zonemory-contact-form .zonemory-form-row textarea{min-height:120px;resize:vertical} /* Payment Methods (REQ-V2-0060): 8791 block geometry, 8793 typography and palette. */ .zonemory-payment-methods{max-width:1232px;margin:0 auto;font-family:Jost,Arial,sans-serif;color:#525956;font-size:16px;line-height:1.7} .zonemory-pm-intro{max-width:920px;margin:0 auto 40px;text-align:left} .zonemory-pm-intro h1{margin:0 0 18px;text-align:left;font-size:clamp(32px,3vw,46px);color:#303b4c} .zonemory-pm-intro p{margin:0 0 12px;color:#525956} .zonemory-pm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} .zonemory-pm-card{box-sizing:border-box;min-height:380px;padding:32px 38px;border:1px solid #e1e3df;border-radius:26px;background:#f5f3ed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0} .zonemory-pm-card h2{margin:0 0 20px;font-size:26px;color:#303b4c} .zonemory-pm-card p{max-width:576px;margin:0;color:#525956} .zonemory-pm-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:360px;max-width:100%;margin:0 0 22px;padding:0} .zonemory-pm-logos li{margin:0} .zonemory-pm-card img{display:block;max-width:100%;height:auto} .zonemory-pm-logos img{width:48px;height:32px;object-fit:contain} .zonemory-pm-card h2.zonemory-pm-paypal{line-height:0} @media(max-width:760px){.zonemory-pm-grid{grid-template-columns:1fr}.zonemory-pm-card{min-height:0;border-radius:22px}} /* ---- Rounded corners (REQ-V2-0051) ---- Controls 8px, content panels 10px, product/media cards 12px. Circular icons, arrows, enlarge, close, account/search icons, bag count and palette swatches keep their 50% circles; catalog/collection/ready filter chips stay pills. Raw artwork/SVG and table cells are never rounded: the surrounding card or media box is. */ /* Controls: buttons (icon circles and quantity steppers excluded) and text-type fields. */ html body :is(.button,input[type=submit],input[type=button],input[type=reset]):not(.icon.circle,.minus,.plus,.icon-button,.dialog-close){border-radius:var(--zonemory-r-control)} html body .zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link){border-radius:var(--zonemory-r-control)} html body :is(input:is(:not([type]),[type=text],[type=email],[type=tel],[type=password],[type=search],[type=url],[type=date]),input[type=number]:not(.qty),select,textarea){border-radius:var(--zonemory-r-control)} html body .select2-container .select2-selection{border-radius:var(--zonemory-r-control)} /* Joined search field + submit: only the outer corners. */ html body .searchform input.search-field{border-radius:var(--zonemory-r-control) 0 0 var(--zonemory-r-control)} html body .searchform .button.ux-search-submit:not(.circle){border-radius:0 var(--zonemory-r-control) var(--zonemory-r-control) 0} /* Choices: Material / Size / Frame cards, finish photos (rule above), legacy size cards. */ html .zonemory-app .tm-extra-product-options ul.zonemory-cf-ul>li.tmcp-field-wrap label.tm-epo-field-label,html .zonemory-app .zonemory-f-size-ul label,html .zonemory-app .size-options label>span{border-radius:var(--zonemory-r-control)} /* Quantity: the bordered outer group is rounded and clips; the three cells stay joined, only their outer corners follow the curve. The clip is lifted while a cell shows its keyboard focus ring, so the ring is never cut. */ html .zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity){border-radius:var(--zonemory-r-control);overflow:hidden} html .zonemory-app .zonemory-buy form.cart>:is(.quantity,.ux-quantity):has(:focus-visible){overflow:visible} html .zonemory-app .zonemory-buy form.cart>.ux-quantity input.minus[type=button]{border-radius:calc(var(--zonemory-r-control) - 1px) 0 0 calc(var(--zonemory-r-control) - 1px)} html .zonemory-app .zonemory-buy form.cart>.ux-quantity input.plus[type=button]{border-radius:0 calc(var(--zonemory-r-control) - 1px) calc(var(--zonemory-r-control) - 1px) 0} /* Native Flatsome quantity (cart): the cells carry their own borders, so round the outer corners of the end cells only. */ html body .ux-quantity .minus{border-radius:var(--zonemory-r-control) 0 0 var(--zonemory-r-control)} html body .ux-quantity .plus{border-radius:0 var(--zonemory-r-control) var(--zonemory-r-control) 0} /* Content panels: dialogs (not the full-height mobile drawer), notices, info/policy boxes, checkout/account boxes. */ .zonemory-app :is(.dialog,.zonemory-info-dialog):not(.mobile-dialog){border-radius:var(--zonemory-r-panel)} html body :is(.woocommerce-error,.woocommerce-message,.woocommerce-info){border-radius:var(--zonemory-r-panel)} .zonemory-app .zonemory-epo-section :is(.tm-section-description,.tc-section-subtitle),.zonemory-app .sample-hint{border-radius:var(--zonemory-r-panel)} :is(.zonemory-policy-notice,.zonemory-policy-actual,.zonemory-legacy-warning,.zonemory-empty,.zonemory-ack,.zonemory-company){border-radius:var(--zonemory-r-panel)} html body :is(.has-border,#payment .payment_box,form.woocommerce-form-login,form.woocommerce-form-register,form.checkout_coupon,form.lost_reset_password){border-radius:var(--zonemory-r-panel)} /* Cards and media: product cards, detail art boxes, gallery, thumbnails, editorial image blocks. */ .zonemory-app :is(.card-art,.hero-mini,.ready-detail-art,.preview-stage,.zonemory-g-main){border-radius:var(--zonemory-r-card)} .zonemory-app .zonemory-g-thumb{border-radius:var(--zonemory-r-card)} .zonemory-app .zonemory-g-thumb>span{border-radius:calc(var(--zonemory-r-card) - 4px)} .zonemory-app .editorial{border-radius:var(--zonemory-r-card);overflow:hidden} /* A focusable feature image must keep its outside focus ring: no clip there; the image rounds its outer corners itself. */ .zonemory-app .editorial:has(.personalized-feature-art){overflow:visible} .zonemory-app .personalized-feature-art{border-radius:var(--zonemory-r-card) 0 0 var(--zonemory-r-card)} .zonemory-app .personalized-feature-reverse .personalized-feature-art{border-radius:0 var(--zonemory-r-card) var(--zonemory-r-card) 0} @media(max-width:760px){.zonemory-app .personalized-feature-art,.zonemory-app .personalized-feature-reverse .personalized-feature-art{border-radius:var(--zonemory-r-card) var(--zonemory-r-card) 0 0}} html body .product-small .box-image{border-radius:var(--zonemory-r-card);overflow:hidden} html body .woocommerce-cart-form .product-thumbnail img{border-radius:var(--zonemory-r-card)} /* ---- Contact details and social icons (REQ-V2-0057) ---- Navy outline icons in circular containers on the cream panels. Contact Us content sits outside .zonemory-app, so the palette values are written out. Social items without a real URL are non-navigating buttons (REQ-V2-0209). */ html body ul.zonemory-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px} html body ul.zonemory-contact-list>li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:0;list-style:none;line-height:1.5} .zonemory-contact-icon{position:relative;flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #303b4c;border-radius:var(--zonemory-r-circle);color:#303b4c} .zonemory-contact-icon svg{display:block;width:18px;height:18px;stroke-linecap:round;stroke-linejoin:round} .zonemory-contact-text{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere} .zonemory-contact-text strong{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#303b4c;line-height:1.5} .zonemory-contact-text a{color:inherit} .zonemory-contact-text a:hover{text-decoration:underline} .zonemory-app .footer-grid .zonemory-contact-list a{display:inline;margin:0;font-size:inherit;text-align:inherit} .zonemory-app .footer-grid .zonemory-contact-list{font-size:14px} html body ul.zonemory-social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0} html body ul.zonemory-social>li{position:relative;margin:0;padding:0;list-style:none} .zonemory-company ul.zonemory-social{margin-top:22px;padding-top:20px;border-top:1px solid #e1e3df} html body .zonemory-social-item{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:1px solid #303b4c;border-radius:var(--zonemory-r-circle);color:#303b4c;background:transparent;cursor:default;transition:none} html body a.zonemory-social-item,html body button.zonemory-social-item,html body .zonemory-app .footer-grid a.zonemory-social-item,html body .zonemory-app .footer-grid button.zonemory-social-item{display:inline-flex;margin:0;padding:0;cursor:pointer;text-decoration:none} html body button.zonemory-social-item,html body .zonemory-app .footer-grid button.zonemory-social-item{appearance:none;min-width:0;min-height:0;max-width:none;font:inherit;line-height:1;letter-spacing:0;text-transform:none;text-shadow:none;vertical-align:baseline;box-shadow:none} /* REQ-V2-0208: brand marks are Flatsome fl-icons glyphs; this scoped sizing leaves every other theme icon untouched. */ html body .zonemory-social-mark{display:block;line-height:1} html body .zonemory-social-mark i{display:block;top:0;margin:0;font-size:18px;line-height:1;color:inherit} /* REQ-V2-0213: one 1.2px ring on every social and contact circle. Browsers floor border widths to whole device pixels, so the SVG ring draws the fractional stroke over the existing 1px border, on the same outer edge of each circle. */ .zonemory-contact-icon::after,html body .zonemory-social-item::after{content:"";position:absolute;top:50%;left:50%;pointer-events:none} .zonemory-contact-icon::after{width:36px;height:36px;margin:-18px 0 0 -18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='17.4' fill='none' stroke='%23303b4c' stroke-width='1.2'/%3E%3C/svg%3E") center/100% 100% no-repeat} html body .zonemory-social-item::after{width:40px;height:40px;margin:-20px 0 0 -20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='19.4' fill='none' stroke='%23303b4c' stroke-width='1.2'/%3E%3C/svg%3E") center/100% 100% no-repeat} /* REQ-V2-0209: every logo stays visible at rest. Hover and focus add no lift, shadow, tooltip or transition (REQ-V2-0198). */ html body .zonemory-social-item:is(:hover,:focus-visible){transform:none;color:#303b4c;background:transparent;box-shadow:none} html body .zonemory-social-item[data-zonemory-social=facebook]{--zonemory-social-bg:#1877f2} html body .zonemory-social-item[data-zonemory-social=instagram]{--zonemory-social-bg:linear-gradient(45deg,#f58529,#dd2a7b 45%,#8134af 75%,#515bd4)} html body .zonemory-social-item[data-zonemory-social=tiktok]{--zonemory-social-bg:#000} html body .zonemory-social-item[data-zonemory-social=pinterest]{--zonemory-social-bg:#e60023} html body .zonemory-social-item[data-zonemory-social=youtube]{--zonemory-social-bg:#f00} /* REQ-V2-0209: the click/tap-selected item (zonemory-site.js) takes its brand background. REQ-V2-0213: fine pointers get the same treatment on hover and keyboard focus; the media query keeps a tap from leaving a sticky hover fill on touch screens. REQ-V2-0214: the doubled class outranks zonemory-poster.css's .zonemory-app button:hover:not(:disabled) ink color (0,3,1), which kept button marks dark; the mark and its glyph are also set white directly. */ html body .zonemory-social-item.is-selected,html body .zonemory-social-item.is-selected:is(:hover,:focus-visible){color:#fff;background:var(--zonemory-social-bg)} @media(hover:hover) and (pointer:fine){html body .zonemory-social-item.zonemory-social-item:is(:hover,:focus-visible){color:#fff;background:var(--zonemory-social-bg)}html body .zonemory-social-item.zonemory-social-item:is(:hover,:focus-visible) :is(.zonemory-social-mark,.zonemory-social-mark i){color:#fff}} html body .zonemory-social-item:focus{outline:none} html body .zonemory-social-item:focus-visible{outline:2px solid #303b4c;outline-offset:3px} .zonemory-social-tip{display:none} @media(max-width:760px){html body ul.zonemory-social{justify-content:center}} /* ---- Cart feedback (REQ-V2-0066, REQ-V2-0084): one-shot bag/badge/halo, Added to cart toast, offscreen status ---- The header cart link sits outside .zonemory-app and the toast is appended to body, so these rules key on the unique zonemory-cart-* classes alone (no .zonemory-app ancestor) and every colour/radius token carries its literal fallback. */ :where(a.zonemory-cart-link){position:relative} html body a.zonemory-cart-link.zonemory-cart-nonempty .bag-count{font-weight:700;box-shadow:0 0 0 2px #fff} html body a.zonemory-cart-link::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:var(--zonemory-r-circle,999px);pointer-events:none;opacity:0} html body a.zonemory-cart-link.zonemory-cart-bump{isolation:isolate;animation:zonemory-cart-bump 650ms cubic-bezier(.3,.7,.4,1) var(--zonemory-cart-t,0ms) 1 both} html body a.zonemory-cart-link.zonemory-cart-bump::after{animation:zonemory-cart-halo 650ms ease-out var(--zonemory-cart-t,0ms) 1 both} html body a.zonemory-cart-link.zonemory-cart-bump .bag-count{animation:zonemory-cart-pop 650ms ease-out var(--zonemory-cart-t,0ms) 1 both} @keyframes zonemory-cart-bump{0%{transform:none}35%{transform:translateY(-3px) scale(1.09)}70%{transform:translateY(0) scale(.99)}100%{transform:none}} @keyframes zonemory-cart-halo{0%{opacity:0;box-shadow:0 0 0 0 rgba(99,116,89,.4);background:transparent}25%{opacity:1;background:var(--sage,#e8ece5)}100%{opacity:0;box-shadow:0 0 0 11px rgba(99,116,89,0);background:transparent}} @keyframes zonemory-cart-pop{0%,30%{transform:none}55%{transform:scale(1.28)}100%{transform:none}} html body .zonemory-cart-toast{position:fixed;z-index:1001;top:var(--zonemory-toast-top,96px);right:var(--zonemory-toast-right,16px);left:auto;bottom:auto;width:min(340px,calc(100vw - 24px));max-width:calc(100vw - 24px);box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px 12px;margin:0;padding:12px;border:1px solid var(--line,#e1e3df);border-radius:var(--zonemory-r-panel,10px);background:var(--cream,#f5f3ed);color:var(--ink,#303b4c);box-shadow:0 10px 28px rgba(48,59,76,.16);font-family:Jost,Arial,sans-serif;font-size:14px;line-height:1.35;text-align:left;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease} html body .zonemory-cart-toast *{box-sizing:border-box} html body .zonemory-cart-toast[hidden]{display:none} html body .zonemory-cart-toast.is-open{opacity:1;transform:none} html body .zonemory-cart-toast.no-thumb{grid-template-columns:minmax(0,1fr)} html body .zonemory-cart-toast .zonemory-cart-toast-thumb{width:48px;height:60px;display:grid;place-items:center;overflow:hidden;border-radius:var(--zonemory-r-control,8px);background:var(--sage,#e8ece5)} html body .zonemory-cart-toast.no-thumb .zonemory-cart-toast-thumb{display:none} html body .zonemory-cart-toast .zonemory-cart-toast-thumb img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain} html body .zonemory-cart-toast .zonemory-cart-toast-copy{min-width:0} html body .zonemory-cart-toast .zonemory-cart-toast-status{display:flex;align-items:center;gap:6px;margin:0;padding:0;color:var(--ink,#303b4c);font-size:15px;font-weight:600;line-height:1.3} html body .zonemory-cart-toast .zonemory-cart-toast-status svg{flex:none;width:16px;height:16px;color:#637459} html body .zonemory-cart-toast .zonemory-cart-toast-name{margin:2px 0 0;padding:0;overflow:hidden;color:var(--text,#525956);font-size:13px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis} html body .zonemory-cart-toast .zonemory-cart-toast-name[hidden]{display:none} html body .zonemory-cart-toast .zonemory-cart-toast-view{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:8px 14px;border-radius:var(--zonemory-r-control,8px);background:var(--ink,#303b4c);color:#fff;font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.2;text-decoration:none} html body .zonemory-cart-toast .zonemory-cart-toast-view:is(:hover,:focus){background:#48586a;color:#fff} html body .zonemory-cart-toast .zonemory-cart-toast-view:focus-visible{outline:2px solid var(--ink,#303b4c);outline-offset:2px} .zonemory-cart-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} @media(max-width:760px){html body .zonemory-cart-toast{left:12px;right:12px;width:auto;max-width:none}} /* Reduced motion: no lift, scale, halo or badge keyframes; the 3s toast, updated count and live status are unchanged. The bag instead shows a still sage highlight and badge ring for the ~700ms the bump class is set (REQ-V2-0086). */ @media(prefers-reduced-motion:reduce){html body a.zonemory-cart-link.zonemory-cart-bump,html body a.zonemory-cart-link.zonemory-cart-bump::after,html body a.zonemory-cart-link.zonemory-cart-bump .bag-count{animation:none}html body a.zonemory-cart-link.zonemory-cart-bump::after{opacity:1;background:var(--sage,#e8ece5);box-shadow:0 0 0 2px rgba(99,116,89,.45)}html body a.zonemory-cart-link.zonemory-cart-bump .bag-count{box-shadow:0 0 0 2px #fff,0 0 0 4px #637459}html body .zonemory-cart-toast,html body .zonemory-cart-toast.is-open{transform:none;transition:none}} /* ---- Navigation type, sticky header and sticky product media (REQ-V2-0069) ---- */ /* Desktop nav (full menu shown above 1100px): all five items and their arrow glyphs ~20% larger (16px -> 19px), semibold. Mega menus: category/group controls and category headings get the same +20% semibold step; product/design links unchanged. */ @media(min-width:1101px){ .zonemory-app .desktop-nav :is(button,a){font-size:19px;font-weight:600;line-height:1.2} .zonemory-app .desktop-nav button span{font-size:1em;line-height:1} .zonemory-app .mega-groups button{font-size:19px;font-weight:600} .zonemory-app .mega-groups button span{font-size:29px} .zonemory-app .mega-menu h2,.zonemory-app .mega-links .zonemory-menu-panel h2{font-size:31px;font-weight:600} } /* Fit the larger cluster beside the 185px logo and header icons on narrower desktops. */ @media(min-width:1101px) and (max-width:1250px){.zonemory-app .header-inner{gap:18px}.zonemory-app .desktop-nav{gap:16px}} /* Header stays at the viewport top while the document scrolls (the offer bar scrolls away). Ancestors that clip horizontally use overflow-x:clip so they don't become scroll containers and break sticky. Stacks below the cart toast (1001). */ html:has(#site-header),html:has(#site-header) body,html body :is(#wrapper,#main):has(#site-header){overflow-x:clip} .zonemory-app #site-header{position:sticky;top:0;z-index:35;background:#fff;box-shadow:0 1px 0 #eff0ed,0 4px 14px #1f29370f;transition:box-shadow .2s ease,background-color .2s ease} @media(prefers-reduced-motion:reduce){.zonemory-app #site-header{transition:none}} /* Product media follows the document scroll at 1024px+: sticky inside its detail grid (released at the grid's bottom), no fixed height, no overflow, no inner scrollbar. Header height + 1px border + 20px breathing room. */ @media(min-width:1024px){ .zonemory-app .ready-detail>.zonemory-gallery,.zonemory-app .personalizer>.preview-column{position:sticky;top:calc(var(--header) + 21px);align-self:start} /* If the gallery is wrapped in its own column element, that column spans the row so the gallery can travel within it. */ .zonemory-app .ready-detail>:has(>.zonemory-gallery:only-child){align-self:stretch} .zonemory-app .ready-detail>:has(>.zonemory-gallery:only-child)>.zonemory-gallery{position:sticky;top:calc(var(--header) + 21px)} } /* Below 1024px: never sticky; existing source order (media first, then options) and layouts unchanged. */ @media(max-width:1023px){ .zonemory-app .ready-detail .zonemory-gallery,.zonemory-app .personalizer .preview-column{position:static;top:auto} } /* Catalog Search row (REQ-V2-0070): long Search products... field with the dark Search button beside it; result count and Show all sit at the end on desktop and on their own row on small screens. Overrides the zonemory-poster.css grid. */ /* Compact toolbar (REQ-V2-0184): Category + Sort by selects on the left, a shorter Search row with the result count on the right. No outer frame or separator; only the individual controls keep their borders. */ .zonemory-app .catalog-search.zonemory-catalog-search{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:24px 0;border:0;box-shadow:none;background:none} .zonemory-app .zonemory-catalog-selects{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:12px;min-width:0} .zonemory-app .catalog-search .zonemory-catalog-select{display:flex;align-items:center;gap:8px;min-width:0;margin:0;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap} .zonemory-app .zonemory-catalog-select select{box-sizing:border-box;width:auto;min-width:150px;max-width:220px;height:48px;min-height:48px;margin:0;padding:0 34px 0 12px;border:1px solid #cbd0c6;border-radius:var(--zonemory-r-control);background-color:#fff;box-shadow:none;font-size:14px;color:var(--ink);cursor:pointer} .zonemory-app .zonemory-catalog-select select:hover:not(:focus){border-color:#9aa596} .zonemory-app .zonemory-catalog-select select:focus{border-color:var(--ink);box-shadow:none} .zonemory-app .zonemory-catalog-select select:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .zonemory-app .zonemory-catalog-find{display:flex;flex:0 1 auto;align-items:center;gap:15px;min-width:0;margin-left:auto} .zonemory-app .zonemory-catalog-search-form{display:flex;flex:0 1 auto;align-items:stretch;gap:12px;min-width:0;margin:0} .zonemory-app .zonemory-catalog-search-form input[type=search]{box-sizing:border-box;flex:0 1 auto;width:clamp(180px,22vw,320px);min-width:0;height:48px;min-height:48px;margin:0;padding:0 16px;border:1px solid #cbd0c6;border-radius:var(--zonemory-r-control);background:#fff;box-shadow:none;font-size:15px;color:var(--ink)} .zonemory-app .zonemory-catalog-search-form input[type=search]:focus{border-color:var(--ink);box-shadow:none} .zonemory-app .zonemory-catalog-search-form input[type=search]:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .zonemory-app .zonemory-catalog-search-submit{box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:48px;min-height:48px;margin:0;padding:0 30px;border:1px solid var(--ink);border-radius:var(--zonemory-r-control);background:var(--ink);color:#fff;font-size:15px;font-weight:500;line-height:1;letter-spacing:.01em;text-transform:none;cursor:pointer;transition:background-color .2s ease} .zonemory-app .zonemory-catalog-search-submit:hover{background:#1f2836;border-color:#1f2836;color:#fff} .zonemory-app .zonemory-catalog-search-submit:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .zonemory-app .zonemory-catalog-search-meta{display:flex;flex:0 0 auto;align-items:center;gap:12px} .zonemory-app .zonemory-catalog-search-meta p{margin:0;font-size:13px;white-space:nowrap} .zonemory-app .zonemory-sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} @media(max-width:1100px){ .zonemory-app .zonemory-catalog-find{flex:1 1 100%;margin-left:0} .zonemory-app .zonemory-catalog-search-form{flex:1 1 auto} .zonemory-app .zonemory-catalog-search-form input[type=search]{flex:1 1 auto;width:auto} } @media(max-width:760px){ .zonemory-app .catalog-search.zonemory-catalog-search{gap:10px;padding-block:20px} .zonemory-app .zonemory-catalog-selects{flex:1 1 100%;gap:10px} .zonemory-app .catalog-search .zonemory-catalog-select{flex:1 1 140px;flex-direction:column;align-items:stretch;gap:4px;font-size:12px} .zonemory-app .zonemory-catalog-select select{width:100%;min-width:0;max-width:none;font-size:16px} .zonemory-app .zonemory-catalog-find{flex-wrap:wrap;gap:10px} .zonemory-app .zonemory-catalog-search-form{flex:1 1 100%;gap:8px} .zonemory-app .zonemory-catalog-search-form input[type=search]{font-size:16px;padding:0 12px} .zonemory-app .zonemory-catalog-search-submit{padding:0 18px} .zonemory-app .zonemory-catalog-search-meta{flex:1 1 100%;justify-content:space-between} .zonemory-app .zonemory-catalog-search-meta p{font-size:12px} } @media(prefers-reduced-motion:reduce){.zonemory-app .zonemory-catalog-search-submit{transition:none}} /* Shared category frame (REQ-V2-0184): one full-width outer frame around the collection pills + Featured only on the Products and Personalized catalog pages; height follows its content, so extra pills simply grow it downward. */ .zonemory-app.zonemory-catalog-page .catalog-tools{box-sizing:border-box;width:100%;max-width:100%;height:auto;margin-inline:0;border:1px solid #cfd3ce;border-radius:10px;padding:20px 24px} @media(max-width:760px){.zonemory-app.zonemory-catalog-page .catalog-tools{padding:18px 16px}} /* ---- Cart Edit options (REQ-V2-0073) ---- Closed state: only the link text shrinks to 12.5px (EPO's own link keeps its place; a created link sits directly below the product name). The dialog is appended to body, outside .zonemory-app, so the palette values are written out. */ html body .woocommerce-cart-form a.zonemory-line-edit{font-size:12.5px;font-weight:400;line-height:1.4;color:#525956;text-decoration:underline;text-underline-offset:2px} html body .woocommerce-cart-form a.zonemory-line-edit-own{display:block;width:max-content;max-width:100%;margin:2px 0 0;padding:0} html body .woocommerce-cart-form a.zonemory-line-edit:hover{color:#303b4c} html body .woocommerce-cart-form a.zonemory-line-edit:focus-visible{outline:2px solid #303b4c;outline-offset:2px;border-radius:2px} /* Edited line (REQ-V2-0074): its server option rows (dl.variation, wpautop'd values) stay a compact two-column meta block, so Material/Size/Frame/Extras never push the unit price, quantity or line total. */ html body .woocommerce-cart-form .zonemory-line-edited dl.variation{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 .35em;margin:2px 0 0;padding:0;border:0;font-size:12.5px;line-height:1.4;color:#525956} html body .woocommerce-cart-form .zonemory-line-edited dl.variation :is(dt,dd){float:none;clear:none;display:block;margin:0;padding:0;border:0;font-size:inherit;line-height:inherit;text-transform:none;letter-spacing:0} html body .woocommerce-cart-form .zonemory-line-edited dl.variation dt{font-weight:500;color:#303b4c} html body .woocommerce-cart-form .zonemory-line-edited dl.variation dd{overflow-wrap:anywhere} html body .woocommerce-cart-form .zonemory-line-edited dl.variation dd p{margin:0;padding:0;font-size:inherit;line-height:inherit} .zonemory-line-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid #e1e3df;border-radius:var(--zonemory-r-panel,10px);background:#fff;color:#525956;font-family:Jost,Arial,sans-serif;font-size:14px;line-height:1.45;box-shadow:0 18px 50px rgba(48,59,76,.22);overflow:auto;overscroll-behavior:contain} .zonemory-line-dialog::backdrop{background:rgba(48,59,76,.45)} .zonemory-line-dialog [hidden]{display:none!important} html body .zonemory-line-dialog .zonemory-line-form{margin:0;padding:16px 20px 20px} .zonemory-line-head{display:flex;align-items:center;justify-content:space-between;gap:12px} html body .zonemory-line-dialog h2{margin:0;font-family:inherit;font-size:19px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#303b4c} html body .zonemory-line-dialog .zonemory-line-name{margin:2px 0 14px;font-size:13px;color:#787c76} html body .zonemory-line-dialog fieldset{min-width:0;margin:0 0 12px;padding:0;border:0} html body .zonemory-line-dialog :is(legend,.zonemory-line-row>label){display:block;margin:0 0 5px;padding:0;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#303b4c} .zonemory-line-row{margin:0 0 12px} .zonemory-line-seg{display:flex;gap:8px} html body .zonemory-line-seg label{position:relative;flex:1 1 0;margin:0} html body .zonemory-line-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .zonemory-line-seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 10px;border:1px solid #cbd0c6;border-radius:var(--zonemory-r-control,8px);font-size:14px;color:#303b4c} .zonemory-line-seg input:checked+span{border-color:#303b4c;box-shadow:inset 0 0 0 1px #303b4c;background:#f5f3ed} .zonemory-line-seg input:focus-visible+span{outline:2px solid #303b4c;outline-offset:2px} html body .zonemory-line-dialog :is(select,textarea){box-sizing:border-box;width:100%;min-height:40px;margin:0;padding:8px 12px;border:1px solid #cbd0c6;border-radius:var(--zonemory-r-control,8px);background-color:#fff;box-shadow:none;font:inherit;font-size:14px;color:#303b4c} html body .zonemory-line-dialog textarea{min-height:64px;resize:vertical} html body .zonemory-line-dialog :is(select,textarea):focus-visible{outline:2px solid #303b4c;outline-offset:1px;border-color:#303b4c} /* Extras of one line (REQ-V2-0098): one compact framed panel (checkout border, radius and palette), one row per Extra with the label left and the server amount right, at the former cart Extras scale (14px labels, 16px boxes, 12.5px amounts and notes). The gift message field opens under Gift Message Card only while it is ticked. REQ-V2-0103: the frame is scoped to the dialog (html body .zonemory-line-dialog) so no theme reset of div/fieldset borders can drop it, and uses the site's control border so it reads as a frame on white; it only wraps the Extras, never Material/Size/Frame. */ /* REQ-V2-0108: the frame is replaced by the product page's compact flat list (no outer card, one very light rule above): checkbox · name + amount inline · underlined "learn more" right; its information opens under the row. */ html body .zonemory-line-dialog fieldset.zonemory-line-extras{min-width:0;max-width:100%;margin:0 0 10px;padding:8px 0 0;border:0;border-top:1px solid #eceee9} html body .zonemory-line-dialog .zonemory-line-xpanel{display:grid;gap:0;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;overflow-wrap:anywhere} .zonemory-line-x{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0} html body .zonemory-line-x label{display:flex;flex:1 1 0;align-items:center;gap:8px;min-width:0;min-height:30px;margin:0;font-size:14px;font-weight:400;line-height:1.35;letter-spacing:0;text-transform:none;color:#303b4c;cursor:pointer} html body .zonemory-line-x input{flex:none;width:16px;height:16px;margin:0;accent-color:#303b4c;cursor:pointer} html body .zonemory-line-x input:focus-visible{outline:2px solid #303b4c;outline-offset:2px} html body .zonemory-line-x input:disabled{cursor:default} html body .zonemory-line-x.is-unavailable label{opacity:.6;cursor:default} .zonemory-line-x .zonemory-line-xlabel{flex:0 1 auto;min-width:0;overflow-wrap:anywhere} .zonemory-line-x .zonemory-line-amt{flex:none;font-size:13px;font-weight:500;color:#303b4c;white-space:nowrap} .zonemory-line-x .zonemory-line-amt:empty{display:none} html body .zonemory-line-dialog .zonemory-line-more{flex:none;min-height:30px;margin:0 0 0 auto;padding:0 2px;border:0;border-radius:2px;background:none;box-shadow:none;font:400 12.5px/1.3 Jost,Arial,sans-serif;letter-spacing:0;text-transform:none;color:#303b4c;text-decoration:underline;text-underline-offset:3px;cursor:pointer} html body .zonemory-line-dialog .zonemory-line-more:hover{color:#48586a} html body .zonemory-line-dialog .zonemory-line-more:focus-visible{outline:2px solid #303b4c;outline-offset:2px} html body .zonemory-line-dialog .zonemory-line-x>p{flex:1 1 100%;min-width:0} html body .zonemory-line-dialog .zonemory-line-info{margin:0 0 6px 24px;font-size:12.5px;line-height:1.45;color:#525956} html body .zonemory-line-dialog .zonemory-line-gift{margin:2px 0 6px 24px;min-width:0} html body .zonemory-line-dialog .zonemory-line-gift label{display:block;margin:0 0 4px;padding:0;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#303b4c} html body .zonemory-line-dialog .zonemory-line-gift textarea{min-height:56px;padding:6px 10px} html body .zonemory-line-dialog .zonemory-line-gift .zonemory-line-note{margin-left:0} html body .zonemory-line-dialog .zonemory-line-price{margin:4px 0 12px;padding:8px 10px;border-radius:var(--zonemory-r-control,8px);background:#f5f3ed;font-size:13px;color:#303b4c} html body .zonemory-line-dialog .zonemory-line-error{margin:0 0 12px;padding:8px 10px;border-radius:var(--zonemory-r-control,8px);background:#fbeeee;font-size:13px;color:#8a2b2b} .zonemory-line-actions{display:flex;justify-content:flex-end;gap:10px} html body .zonemory-line-dialog .zonemory-line-actions button{min-height:42px;margin:0;padding:8px 18px;border:1px solid #303b4c;border-radius:var(--zonemory-r-control,8px);box-shadow:none;font:500 14px/1.2 Jost,Arial,sans-serif;letter-spacing:.01em;text-transform:none;cursor:pointer;transition:background-color .2s ease} html body .zonemory-line-dialog .zonemory-line-cancel{border-color:#cbd0c6;background:#fff;color:#303b4c} html body .zonemory-line-dialog .zonemory-line-cancel:hover:not(:disabled){background:#e8ece5} html body .zonemory-line-dialog .zonemory-line-update{background:#303b4c;color:#fff} html body .zonemory-line-dialog .zonemory-line-update:hover:not(:disabled){background:#48586a;border-color:#48586a} html body .zonemory-line-dialog .zonemory-line-actions button:disabled{opacity:.6;cursor:default} html body .zonemory-line-dialog .zonemory-line-actions button:focus-visible{outline:2px solid #303b4c;outline-offset:2px} html body .zonemory-line-dialog .zonemory-line-close{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:0;margin:0 -8px 0 0;padding:0;border:0;border-radius:var(--zonemory-r-circle,999px);background:transparent;box-shadow:none;color:#303b4c;cursor:pointer} html body .zonemory-line-dialog .zonemory-line-close:hover{background:#e8ece5} html body .zonemory-line-dialog .zonemory-line-close:focus-visible{outline:2px solid #303b4c;outline-offset:1px} /* Small screens: a bottom sheet with full-width actions; 16px fields avoid iOS zoom. */ @media(max-width:549px){ .zonemory-line-dialog{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--zonemory-r-panel,10px) var(--zonemory-r-panel,10px) 0 0} html body .zonemory-line-dialog .zonemory-line-form{padding:14px 16px 18px} html body .zonemory-line-dialog :is(select,textarea){font-size:16px} html body .zonemory-line-dialog .zonemory-line-actions button{flex:1 1 0} html body .zonemory-line-x label,html body .zonemory-line-dialog .zonemory-line-more{min-height:40px} } @media(prefers-reduced-motion:reduce){html body .zonemory-line-dialog .zonemory-line-actions button{transition:none}} /* ---- Cart checkout action and coupon row (REQ-V2-0087, REQ-V2-0098) ---- No shared Extras card: every Extra is edited in a line's Edit options. The one Proceed to checkout action is the last element of the right column, full width after Cart totals and Coupon; Cart totals keeps no empty checkout wrapper. No row X (the server outputs none; the empty cell takes no room) and no Update cart (the script removes it; hidden here until it runs). One change at a time: the cart dims while it saves. */ html body .cart-sidebar .zonemory-cart-checkout,html body .zonemory-cart-checkout{box-sizing:border-box;clear:both;max-width:100%;margin:16px 0 0;padding:0} html body .zonemory-cart-checkout .checkout-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:48px;margin:0;padding:10px 18px;font-size:16px;line-height:1.25;text-align:center;white-space:normal} html body .cart_totals .wc-proceed-to-checkout:not(:has(a,button,input,iframe)){display:none} html body .woocommerce-cart-form [name="update_cart"]{display:none!important} html body .woocommerce-cart-form :is(th,td).product-remove{width:0;padding:0!important} html body :is(.woocommerce-cart-form,.cart_totals).zonemory-cart-busy{opacity:.65;transition:opacity .15s ease} .zonemory-cart-notice{box-sizing:border-box;max-width:100%;margin:0 0 16px;padding:10px 12px;border-radius:var(--zonemory-r-control,8px);background:#fbeeee;color:#8a2b2b;font-size:14px;line-height:1.45;overflow-wrap:anywhere} .zonemory-cart-notice[hidden]{display:none} html body .zonemory-line-dialog .zonemory-line-note{margin:2px 0 0 24px;font-size:12.5px;line-height:1.4;color:#787c76} html body .zonemory-line-dialog .zonemory-line-note:empty{display:none} @media(prefers-reduced-motion:reduce){html body :is(.woocommerce-cart-form,.cart_totals).zonemory-cart-busy{transition:none}} @media(max-width:549px){ html body .zonemory-line-dialog .zonemory-line-xpanel{gap:6px;padding:8px 10px} html body .zonemory-line-dialog .zonemory-line-gift{margin-left:0} } /* Coupon (cart page, REQ-V2-0091): form.ux-cart-coupon > div.coupon holds h3.widget-title, the screen-reader label, #coupon_code and Apply coupon. The heading takes the first row; Coupon code and Apply coupon share the next row on every width: the field takes the rest of the width (min-width 0), the button keeps its content width without wrapping (overriding Flatsome's .expand width:100%), both 44px high with an 8px gap. No :has; the label stays screen-reader only. */ html body form.ux-cart-coupon>div.coupon{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;box-sizing:border-box;min-width:0;max-width:100%} html body form.ux-cart-coupon>div.coupon>h3.widget-title{flex:0 0 100%;max-width:100%;box-sizing:border-box} html body form.ux-cart-coupon>div.coupon>input#coupon_code{box-sizing:border-box;flex:1 1 0%;width:auto;min-width:0;max-width:none;height:44px;min-height:44px;margin:0} html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon]{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:0;max-width:none;height:44px;min-height:44px;margin:0;padding-top:0;padding-bottom:0;line-height:1;white-space:nowrap} /* REQ-V2-0092: at runtime Flatsome's .expand full width still won (button 274px, wrapped), so width is forced here only. */ html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon].is-form.expand{width:auto!important;max-width:100%;flex:0 0 auto} /* REQ-V2-0139: Flatsome's .is-form white text-shadow made a halo on the dark button and padding-left/right was 0; clean white label with balanced side padding in every state. Height, gap, row and column width unchanged. REQ-V2-0140: Flatsome's .expand,.full-width sets padding-left/right:0!important, so the side padding needs !important. */ html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon],html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon]:is(:hover,:focus,:focus-visible,:active,:disabled){color:#fff;text-shadow:none} html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon]{padding-left:16px!important;padding-right:16px!important} @media(max-width:380px){html body form.ux-cart-coupon>div.coupon>button[name=apply_coupon]{padding-left:12px!important;padding-right:12px!important}} /* ---- Global interactions (REQ-V2-0082): two separate systems ---- CTA: semibold label; hover/focus = existing background or underline highlight + subtle glow, trailing arrow moves 4px. The control itself never moves or scales. Card: interactive product/category/Personalized/related cards lift 4px, only their image scales 2.5% inside its existing clip, shadow strengthens slightly; no arrow motion. Static copy, policies, forms, hero minis and info panels are not listed, so they get nothing. Pointer hover only on hover-capable fine pointers; keyboard focus-visible mirrors it; reduced motion keeps the glow/shadow cue without movement. */ html body{--zonemory-cta-fx-btn:0 0 0 3px rgba(48,59,76,.12),0 6px 16px -6px rgba(48,59,76,.4);--zonemory-cta-fx:var(--zonemory-cta-fx-btn)} /* Text CTAs highlight their underline instead; the Personalized dark-button text links keep the button glow. */ .zonemory-app :is(.text-link,.hero-secondary){--zonemory-cta-fx:inset 0 -1px var(--ink),0 8px 10px -10px rgba(48,59,76,.5)} .zonemory-app :is(.text-link.zonemory-cta-love,.personalized-feature .text-link,.editorial:has(.personalized-feature-art) .text-link){--zonemory-cta-fx:var(--zonemory-cta-fx-btn)} /* CTA group: View collection / Explore / View poster links, buttons, Add to cart, Search, checkout and form submit actions. Icon circles, rail arrows, quantity steppers and dialog close controls are excluded. */ html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .zonemory-catalog-search-submit,.zonemory-cart-toast .zonemory-cart-toast-view,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button,.button.primary,.button.alt,.checkout-button,[id=place_order],button[type=submit].button,.woocommerce-button,.woocommerce-Button,.zonemory-contact-form .button,.zonemory-line-dialog .zonemory-line-actions button){font-weight:600;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,translate .2s ease} .zonemory-app .card-hover{font-weight:600} html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button)>svg:last-child{transition:transform .2s ease} @media(hover:hover) and (pointer:fine){ html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .zonemory-catalog-search-submit,.zonemory-cart-toast .zonemory-cart-toast-view,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button,.button.primary,.button.alt,.checkout-button,[id=place_order],button[type=submit].button,.woocommerce-button,.woocommerce-Button,.zonemory-contact-form .button,.zonemory-line-dialog .zonemory-line-actions button):not(:disabled,.disabled,[aria-disabled=true]):hover{box-shadow:var(--zonemory-cta-fx)} html body .zonemory-app .hero-secondary:hover{border-bottom-color:var(--ink)} html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button):not(:disabled,.disabled,[aria-disabled=true]):hover>svg:last-child{transform:translateX(4px)} } html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .zonemory-catalog-search-submit,.zonemory-cart-toast .zonemory-cart-toast-view,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button,.button.primary,.button.alt,.checkout-button,[id=place_order],button[type=submit].button,.woocommerce-button,.woocommerce-Button,.zonemory-contact-form .button,.zonemory-line-dialog .zonemory-line-actions button):focus-visible{box-shadow:var(--zonemory-cta-fx)} html body .zonemory-app :is(.text-link,.hero-secondary):focus-visible{border-bottom-color:var(--ink)} html body :is(.zonemory-app .button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .editorial:has(.personalized-feature-art) .text-link,.single_add_to_cart_button):focus-visible>svg:last-child{transform:translateX(4px)} /* Card group. The poster rule's unconditional image lift (sticky on touch) is neutralised; the rail gets 4px of geometry-neutral top room (padding + equal negative margin) so a lifted card is not clipped by its scroller. */ html .zonemory-app .product-card:hover .card-art img{transform:none;box-shadow:2px 5px 9px #27313122} .zonemory-app .product-rail{padding-top:4px;margin-top:-4px} .zonemory-app .product-card:has(>a),.zonemory-app .inspiration-grid>a,.zonemory-app .editorial:has(.personalized-feature-art),html body .product-small.box{transition:transform .3s ease,box-shadow .3s ease} .zonemory-app .product-card:has(>a) .card-art,.zonemory-app .inspiration-grid>a :is(.room-scene,.inspiration-art),html body .product-small.box .box-image{transition:box-shadow .3s ease} html .zonemory-app .product-card:has(>a) .card-art img,.zonemory-app .inspiration-grid>a :is(.inspiration-art img,.room-scene>.room-backdrop,.room-scene>.room-art),.zonemory-app .personalized-feature-art .room-scene,html body .product-small.box .box-image img{transition:transform .35s ease,box-shadow .35s ease} /* REQ-MOTION-20261026-01: product cards (homepage rails, Products, Personalized) lift 3px with the poster at 1.02; inspiration cards keep their 4px lift; editorial imagery scales 1.015. Flatsome .product-small boxes are unchanged. */ @media(hover:hover) and (pointer:fine){ .zonemory-app .product-card:has(>a):hover{transform:translateY(-3px)} .zonemory-app .inspiration-grid>a:hover,html body .product-small.box:hover{transform:translateY(-4px)} .zonemory-app .editorial:has(.personalized-feature-art):hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(48,59,76,.35)} .zonemory-app .product-card:has(>a):hover .card-art,.zonemory-app .inspiration-grid>a:hover :is(.room-scene,.inspiration-art),html body .product-small.box:hover .box-image{box-shadow:0 10px 20px -12px rgba(48,59,76,.3)} html .zonemory-app .product-card:has(>a):hover .card-art img{transform:scale(1.02);box-shadow:4px 10px 16px #27313132} .zonemory-app .inspiration-grid>a:hover :is(.inspiration-art img,.room-scene>.room-backdrop,.room-scene>.room-art),.zonemory-app .editorial:has(.personalized-feature-art):hover .personalized-feature-art .room-scene{transform:scale(1.015)} html body .product-small.box:hover .box-image img{transform:scale(1.025)} } /* Keyboard: the card's own link (already focusable) shows the same card state alongside its focus ring. */ .zonemory-app .product-card:has(>a:focus-visible){transform:translateY(-3px)} .zonemory-app .inspiration-grid>a:focus-visible,html body .product-small.box:has(a:focus-visible){transform:translateY(-4px)} .zonemory-app .product-card:has(>a:focus-visible) .card-art,.zonemory-app .inspiration-grid>a:focus-visible :is(.room-scene,.inspiration-art),html body .product-small.box:has(a:focus-visible) .box-image{box-shadow:0 10px 20px -12px rgba(48,59,76,.3)} html .zonemory-app .product-card:has(>a:focus-visible) .card-art img{transform:scale(1.02);box-shadow:4px 10px 16px #27313132} .zonemory-app .inspiration-grid>a:focus-visible :is(.inspiration-art img,.room-scene>.room-backdrop,.room-scene>.room-art){transform:scale(1.015)} html body .product-small.box:has(a:focus-visible) .box-image img{transform:scale(1.025)} /* REQ-V2-0083: category/filter pills join the CTA system (semibold, background/border + glow; never move or scale). Current/pressed pills keep their ink fill; disabled controls get no glow. */ .zonemory-app :is(.collection-pills a,.catalog-filters a,.catalog-filters button,.ready-filters a){font-weight:600;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease} @media(hover:hover) and (pointer:fine){ .zonemory-app :is(.catalog-filters a:not([aria-current=page]),.catalog-filters button:not([aria-pressed=true])):hover{border-color:#b5c0b2} .zonemory-app :is(.collection-pills a,.catalog-filters a,.catalog-filters button,.ready-filters a):not(:disabled,.disabled,[aria-disabled=true]):hover{box-shadow:var(--zonemory-cta-fx-btn)} } .zonemory-app :is(.collection-pills a,.catalog-filters a,.catalog-filters button,.ready-filters a):focus-visible{box-shadow:var(--zonemory-cta-fx-btn)} /* View poster overlay: CTA cue + 4px arrow only while the pointer is on the overlay itself, not elsewhere on the card. Keyboard focus on the card link shows the cue without arrow travel; no new focus stop. Hidden at <=760px as before. */ .zonemory-app .card-hover{transition:opacity .2s,transform .2s,background-color .2s ease,box-shadow .2s ease} .zonemory-app .card-hover>svg:last-child,.zonemory-app .card-hover>:not(svg):last-child:nth-child(n+2){transition:transform .2s ease} @media(hover:hover) and (pointer:fine){ .zonemory-app .card-hover:hover{background:#fff;box-shadow:var(--zonemory-cta-fx-btn)} .zonemory-app .card-hover:hover>svg:last-child,.zonemory-app .card-hover:hover>:not(svg):last-child:nth-child(n+2){transform:translateX(4px)} } .zonemory-app .product-card>a:focus-visible .card-hover{background:#fff;box-shadow:var(--zonemory-cta-fx-btn)} /* Reduced motion: no lift, image scale or arrow travel; glow, underline and shadow cues remain, applied instantly. */ @media(prefers-reduced-motion:reduce){ .zonemory-app :is(.collection-pills a,.catalog-filters a,.catalog-filters button,.ready-filters a){transition:none} .zonemory-app .card-hover>svg:last-child,.zonemory-app .card-hover>:not(svg):last-child:nth-child(n+2){transform:none!important;transition:none} .zonemory-app .card-hover{transition:opacity .2s} html body :is(.zonemory-app .button,.zonemory-app .text-link,.zonemory-app .hero-secondary,.zonemory-app .zonemory-catalog-search-submit,.zonemory-cart-toast .zonemory-cart-toast-view,.single_add_to_cart_button,.button.primary,.button.alt,.checkout-button,[id=place_order],button[type=submit].button,.woocommerce-button,.woocommerce-Button,.zonemory-contact-form .button,.zonemory-line-dialog .zonemory-line-actions button),html body :is(.zonemory-app .button,.zonemory-app .text-link,.zonemory-app .hero-secondary,.single_add_to_cart_button)>svg:last-child{transition:none} html body :is(.zonemory-app .button,.zonemory-app .text-link,.zonemory-app .hero-secondary,.single_add_to_cart_button)>svg:last-child{transform:none!important} .zonemory-app :is(.product-card,.inspiration-grid>a,.editorial),html body .product-small.box,html .zonemory-app .product-card .card-art img,.zonemory-app .inspiration-grid>a :is(.inspiration-art img,.room-scene>.room-backdrop,.room-scene>.room-art),.zonemory-app .personalized-feature-art .room-scene,html body .product-small.box .box-image img{transform:none!important;transition:none} .zonemory-app .product-card .card-art,.zonemory-app .inspiration-grid>a :is(.room-scene,.inspiration-art),html body .product-small.box .box-image{transition:none} } /* ---- REQ-V2-0142: narrow mobile cart Extras (BEGIN) ---- Cart form only, <=480px: the Extras row (dt/dd.variation-Extras, edited grid or legacy float markup, value as direct text or nested p/div/span) takes the full width of the product details below Material/Size/Frame and wraps at spaces, so a long Extra or its surcharge only breaks inside a word if that word alone cannot fit. Font size, other rows, image, quantity, prices, desktop, mini-cart, checkout and product-page Extras are untouched. */ @media(max-width:480px){ html body .woocommerce-cart-form dl.variation dt.variation-Extras,html body .woocommerce-cart-form dl.variation dd.variation-Extras{grid-column:1/-1;float:none;clear:both;display:block;width:auto;min-width:0;max-width:100%;margin-left:0;margin-right:0} html body .woocommerce-cart-form dl.variation dd.variation-Extras,html body .woocommerce-cart-form dl.variation dd.variation-Extras *{overflow-wrap:break-word;word-break:normal;hyphens:manual;white-space:normal} html body .woocommerce-cart-form dl.variation dd.variation-Extras *{max-width:100%} } /* ---- REQ-V2-0142 (END) ---- */ /* ---- Homepage sync (A-approved: PERSONALIZED-PRODUCTS-SYNC-20261026) ---- */ .zonemory-app .gift-banner, .zonemory-app .personalized-feature{ border-radius:12px; overflow:hidden; } .zonemory-app .personalized-feature-art, .zonemory-app .personalized-feature-reverse .personalized-feature-art{ border-radius:0; } .zonemory-app .product-card{ border-radius:8px; overflow:hidden; } .zonemory-app .product-card .card-art{ border-radius:8px; } .zonemory-app .gift-banner .button, .zonemory-app .personalized-feature .text-link{ min-height:54px; padding:15px 25px; border-radius:8px; font-size:16px; font-weight:600; line-height:1.2; } .zonemory-app .gift-banner .button.light{background:#fff;color:var(--ink);border-color:#fff} .zonemory-app .personalized-feature .text-link{background:var(--ink);color:#fff;border-color:var(--ink)} @media(max-width:760px){ .zonemory-app .gift-banner, .zonemory-app .personalized-feature{border-radius:12px;overflow:hidden} .zonemory-app .gift-banner .button, .zonemory-app .personalized-feature .text-link{min-height:52px;padding:14px 20px} .zonemory-app .product-rail{overflow-x:auto;overscroll-behavior-x:contain} }/* Homepage sync specificity corrections for feature shells. */ .zonemory-app .editorial.personalized-feature:has(.personalized-feature-art){overflow:hidden} .zonemory-app .personalized-feature .personalized-feature-art, .zonemory-app .personalized-feature-reverse .personalized-feature-art{border-radius:0!important}/* CTA normalization: match the existing editorial CTA specificity so every approved homepage CTA shares one geometry. */ .zonemory-app :is(.gift-banner .button,.editorial:has(.personalized-feature-art) .text-link){ min-height:54px; padding:15px 25px; border-radius:8px; font-size:16px; font-weight:600; line-height:1.2; } @media(max-width:760px){ .zonemory-app :is(.gift-banner .button,.editorial:has(.personalized-feature-art) .text-link){ min-height:52px; padding:14px 20px; } }/* Keep approved CTA labels on one line so all mobile CTAs share the same hit area. */ .zonemory-app :is(.gift-banner .button,.editorial:has(.personalized-feature-art) .text-link){white-space:nowrap} /* Homepage hero and 01–03 benefit strip removed (REQ-HEROREMOVE-1028): the how-to section follows the header directly. */ /* Editorial feature sync: equal desktop outer height without clipping copy or artwork. */ @media(min-width:761px){.zonemory-app .personalized-feature{min-height:437px}} /* Editorial text rhythm (REQ-V2-0161): the four Personalized panels share one 50/50 split, copy width and eyebrow/title/body/CTA spacing. */ .zonemory-app .editorial.personalized-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .zonemory-app .personalized-feature .editorial-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;align-self:center;box-sizing:border-box;width:100%;min-width:0;max-width:610px} .zonemory-app .personalized-feature .editorial-copy .eyebrow{margin:0 0 16px} .zonemory-app .personalized-feature .editorial-copy h2{max-width:100%;margin:0 0 20px;text-wrap:balance} .zonemory-app .personalized-feature .editorial-copy p{max-width:400px;margin:0 0 30px;text-wrap:pretty} @media(max-width:760px){ .zonemory-app .editorial.personalized-feature{grid-template-columns:minmax(0,1fr)} .zonemory-app .personalized-feature .editorial-copy{align-items:center;max-width:none} .zonemory-app .personalized-feature .editorial-copy p{margin-inline:auto} } /* ---- Motion pass (REQ-MOTION-20261026-01): homepage, Products and Personalized ---- Motion uses opacity, the individual translate/scale properties and shadows only, so existing transforms (gift poster rotation, card lift) compose with it and document flow never changes. Pointer hover only on hover-capable fine pointers; keyboard focus-visible mirrors it; reduced motion turns it all off (end of this block). */ /* Entrance reveal: zonemory-site.js adds .zonemory-reveal to the homepage hero, gift banner, statement, editorial blocks and product sections and to the catalog heading, tools, search row and grid, then .is-revealed once each enters the viewport; both classes are removed when the single run ends. Without the script nothing is hidden. */ .zonemory-app .zonemory-reveal{opacity:0;translate:0 14px} .zonemory-app .zonemory-reveal.is-revealed{animation:zonemory-reveal .6s cubic-bezier(.22,.61,.36,1) both} @keyframes zonemory-reveal{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}} /* Homepage posters: the gift banner and editorial posters lift 4px at 1.015 with a slightly deeper shadow. */ .zonemory-app :is(.gift-art img,.editorial-poster img){transition:translate .35s ease,scale .35s ease,box-shadow .35s ease} @media(hover:hover) and (pointer:fine){ .zonemory-app .gift-banner:hover .gift-art img{translate:0 -4px;scale:1.015;box-shadow:12px 21px 24px #0000002b} .zonemory-app .editorial:hover .editorial-poster img{translate:0 -4px;scale:1.015;box-shadow:6px 12px 24px #0000002b} } .zonemory-app .gift-banner:has(:focus-visible) .gift-art img{translate:0 -4px;scale:1.015;box-shadow:12px 21px 24px #0000002b} .zonemory-app .editorial:has(:focus-visible) .editorial-poster img{translate:0 -4px;scale:1.015;box-shadow:6px 12px 24px #0000002b} .zonemory-app .editorial:has(.personalized-feature-art):has(:focus-visible){transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(48,59,76,.35)} .zonemory-app .editorial:has(.personalized-feature-art):has(:focus-visible) .personalized-feature-art .room-scene{transform:scale(1.015)} /* Homepage CTAs lift 2px (colour/background transitions and the 4px arrow travel are the global CTA rules above). */ @media(hover:hover) and (pointer:fine){ .zonemory-app :is(.hero,.gift-banner,.statement,.editorial,.product-section) :is(.button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.text-link,.hero-secondary):not(:disabled,.disabled,[aria-disabled=true]):hover{translate:0 -2px} } .zonemory-app :is(.hero,.gift-banner,.statement,.editorial,.product-section) :is(.button:not(.icon-button,.dialog-close,.rail-arrow,.minus,.plus,.circle),.text-link,.hero-secondary):focus-visible{translate:0 -2px} /* Catalog controls: non-active filters, Search and Show all lift 1px; the current/pressed filter keeps its ink fill and never moves. The search field only eases its border. */ .zonemory-app :is(.catalog-filters a:not([aria-current=page]),.catalog-filters button:not([aria-pressed=true]),.zonemory-catalog-search-submit,#clear-filters){transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,translate .2s ease} .zonemory-app .zonemory-catalog-search-form input[type=search]{transition:border-color .2s ease} @media(hover:hover) and (pointer:fine){ .zonemory-app :is(.catalog-filters a:not([aria-current=page]),.catalog-filters button:not([aria-pressed=true]),.zonemory-catalog-search-submit,#clear-filters):not(:disabled,.disabled,[aria-disabled=true]):hover{translate:0 -1px} .zonemory-app .zonemory-catalog-search-form input[type=search]:hover:not(:focus){border-color:#9aa596} } .zonemory-app :is(.catalog-filters a:not([aria-current=page]),.catalog-filters button:not([aria-pressed=true]),.zonemory-catalog-search-submit,#clear-filters):focus-visible{translate:0 -1px} /* Quick action (View poster): a small 6px rise with its fade on desktop hover and keyboard focus. Touch screens never keep it open from a tap's sticky hover (it stays hidden at <=760px as before), so it never covers the card. */ .zonemory-app .card-hover{transform:translateY(6px)} .zonemory-app .product-card:hover .card-hover,.zonemory-app .product-card:focus-within .card-hover{transform:none} @media(hover:none),(pointer:coarse){.zonemory-app .product-card:hover:not(:focus-within) .card-hover{opacity:0;transform:translateY(6px)}} /* Reduced motion: no reveal, lift, zoom, rise, shine or transitions; content stays visible and the glow, underline, shadow, focus ring and active-filter cues still apply instantly. */ @media(prefers-reduced-motion:reduce){ .zonemory-app .zonemory-reveal,.zonemory-app .zonemory-reveal.is-revealed{opacity:1!important;translate:none!important;animation:none!important} html body .zonemory-app :is(.button,.text-link,.hero-secondary,.catalog-filters a,.catalog-filters button,.zonemory-catalog-search-submit,#clear-filters,.gift-art img,.editorial-poster img){translate:none!important;scale:none!important;transition:none!important} html body .zonemory-app .editorial:has(.personalized-feature-art),html body .zonemory-app .personalized-feature-art .room-scene{transform:none!important} .zonemory-app .card-hover,.zonemory-app .product-card:hover .card-hover,.zonemory-app .product-card:focus-within .card-hover{transform:none!important;transition:none!important} .zonemory-app .zonemory-catalog-search-form input[type=search]{transition:none} } /* Homepage groups: Personalized and Products read as two independent blocks, split by a thin rule in the shell width. */ .zonemory-app .zonemory-home-group{display:block;min-width:0} .zonemory-app .zonemory-group-divider{height:0;margin-top:72px;border:0;border-top:1px solid var(--line)} @media(max-width:760px){.zonemory-app .zonemory-group-divider{margin-top:44px}} /* ---- REQ-V2-0162: homepage refinement (BEGIN) ---- Personalized intro: three groups (title, How it works, category choices) in the full shell width, so their left edge matches the editorial blocks and product rails. Groups are separated by spacing only. */ .zonemory-app .statement.zonemory-personalized-intro{max-width:1600px;text-align:left;padding-block:100px 64px} .zonemory-app .zonemory-personalized-intro>div{min-width:0} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:56px} .zonemory-app .zonemory-personalized-head h2{margin-bottom:16px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-head p{max-width:560px;margin:0} .zonemory-app .zonemory-personalized-label{margin:0 0 24px;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:#839077} /* Guide: three equal columns, no connector; number and title share one heading style and stay on one line on desktop. */ .zonemory-app .zonemory-personalized-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:left} .zonemory-app .zonemory-personalized-steps li{position:static;margin:0;padding:0;min-width:0} .zonemory-app .zonemory-personalized-steps li::before,.zonemory-app .zonemory-personalized-steps li::after{content:none} .zonemory-app .zonemory-personalized-steps h4{margin:0 0 10px;font-family:inherit;font-size:21px;font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-transform:none} .zonemory-app .zonemory-personalized-steps h4>span{font:inherit;color:inherit;letter-spacing:inherit} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-steps p{font-size:15px;line-height:1.6;max-width:300px;margin:0} @media(min-width:1101px){.zonemory-app .zonemory-personalized-steps h4{white-space:nowrap}} /* Category choices: heading, one supporting line, then the four existing pills. */ .zonemory-app .zonemory-personalized-choices h3{margin:0 0 8px;font-size:24px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-choices p{font-size:15px;line-height:1.6;margin:0} .zonemory-app .collection-pills.zonemory-personalized-pills{justify-content:flex-start;margin-top:22px} /* Editorial blocks: one grid with equal rows, so all four blocks share the same outer size and gaps (no clipping). */ .zonemory-app .zonemory-personalized-features{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:26px;margin-bottom:26px} .zonemory-app .zonemory-personalized-features>.editorial.personalized-feature{width:100%;max-width:none;margin:0} @media(max-width:1100px){.zonemory-app .zonemory-personalized-steps{gap:28px}} @media(max-width:760px){ .zonemory-app .statement.zonemory-personalized-intro{padding-block:65px 44px} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:40px} .zonemory-app .zonemory-personalized-label{margin-bottom:18px} .zonemory-app .zonemory-personalized-steps{grid-template-columns:minmax(0,1fr);gap:22px} .zonemory-app .zonemory-personalized-steps h4{font-size:20px;margin-bottom:6px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-steps p{max-width:none;font-size:14px} .zonemory-app .zonemory-personalized-choices h3{font-size:22px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-choices p{font-size:14px} .zonemory-app .collection-pills.zonemory-personalized-pills{margin-top:18px} .zonemory-app .zonemory-personalized-features{gap:20px;margin-bottom:20px} .zonemory-app .zonemory-personalized-features>.editorial.personalized-feature{grid-template-rows:auto 1fr} } /* Rule system: every homepage rule is one 1px stroke in var(--line). Content rules sit in the shell width; the header edge keeps one stroke (its duplicate 1px shadow line is dropped, the soft shadow stays). */ .zonemory-app{--zonemory-rule:1px solid var(--line)} .zonemory-app .zonemory-group-divider{border-top:var(--zonemory-rule)} html body.home .zonemory-app .site-header{border-bottom:var(--zonemory-rule)} html body.home .zonemory-app #site-header{box-shadow:0 4px 14px #1f29370f} html body.home .zonemory-app .footer-bottom{border-top:var(--zonemory-rule)} /* REQ-V2-0164: Products collection-rail separators take the same rule colour; their existing 1px top stroke is kept. */ html body.home .zonemory-app .product-section.shell{border-top-color:var(--line)} /* ---- REQ-V2-0162 (END) ---- */ /* ---- REQ-V2-0166: homepage spacing refinement (BEGIN) ---- Eyebrows removed; Personalized title, guide, category heading, supporting line and pills tighten into one hierarchy on the shared shell left edge. Font sizes, colours and component sizes are unchanged. */ .zonemory-app .zonemory-personalized-intro>div+div{margin-top:40px} .zonemory-app .zonemory-personalized-head h2{margin-bottom:12px} .zonemory-app .zonemory-personalized-label{margin-bottom:16px} .zonemory-app .zonemory-personalized-choices h3{margin-bottom:6px} .zonemory-app .collection-pills.zonemory-personalized-pills{margin-top:18px} /* Guide on wide desktop: equal columns and one-line descriptions (the gap connector is defined in REQ-V2-0168). */ @media(min-width:1280px){ .zonemory-app .zonemory-personalized-steps{gap:56px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-steps p{max-width:none;white-space:nowrap} .zonemory-app .zonemory-personalized-steps li{position:relative} } /* Products: title/intro to pills and pills to the first rail tighten via the intro only, so all four rails keep identical padding and their 1px rules. */ .zonemory-app .zonemory-home-group-products .intro-section{padding-bottom:28px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{margin-top:22px} @media(max-width:760px){ .zonemory-app .zonemory-personalized-intro>div+div{margin-top:32px} .zonemory-app .zonemory-personalized-label{margin-bottom:14px} .zonemory-app .collection-pills.zonemory-personalized-pills{margin-top:16px} .zonemory-app .zonemory-home-group-products .intro-section{padding-bottom:17px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{margin-top:18px} } /* ---- REQ-V2-0166 (END) ---- */ /* ---- REQ-V2-0167: centred guide (BEGIN) ---- The guide label now carries the category heading (label typography unchanged) and the duplicate heading/supporting line below is removed, so the pills follow the guide directly on the intro's 40px/32px group spacing. On wide desktop the guide is a centred block of about two-thirds of the shell; it grows only if the one-line descriptions need more room, and never past the shell. Below 1280px it keeps the full width and existing stacking. */ .zonemory-app .collection-pills.zonemory-personalized-pills{margin-top:0} @media(min-width:1280px){ .zonemory-app .zonemory-personalized-guide{width:fit-content;min-width:66.667%;max-width:100%;margin-inline:auto} } /* ---- REQ-V2-0167 (END) ---- */ /* ---- REQ-V2-0168: guide icon timeline (BEGIN) ---- On wide desktop each step gets a small aria-hidden outline icon centred in its column, and a 1px rule with a node at each end joins neighbouring icons across the 56px gap (24px clear of each 32px icon box). Below 1280px the icons and rule are hidden, so tablet columns and mobile stacking are unchanged. */ .zonemory-app .zonemory-step-icon{display:none} @media(min-width:1280px){ .zonemory-app .zonemory-step-icon{display:flex;justify-content:center;align-items:center;height:32px;margin-bottom:16px;color:var(--muted)} .zonemory-app .zonemory-step-icon svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round} .zonemory-app .zonemory-personalized-steps li:not(:last-child)::after{content:"";position:absolute;top:13.5px;left:calc(50% + 24px);width:calc(100% + 8px);height:5px;background:radial-gradient(circle,var(--muted) 1.5px,transparent 2px) left center/5px 5px no-repeat,radial-gradient(circle,var(--muted) 1.5px,transparent 2px) right center/5px 5px no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;pointer-events:none} } /* ---- REQ-V2-0168 (END) ---- */ /* ---- REQ-V2-0172: compact Made timeline (BEGIN) ---- Supersedes the REQ-V2-0167/0168 guide (its markup is removed). A three-step timeline sits 18px (23px at <=560px) below the Made sentence, left-aligned with it and sized to the sentence's rendered width: the wrapper shrinks to the sentence, and the timeline's zero width keeps it from widening that box. Icons sit in white 43px boxes over a 1px solid connector. Colours and type follow the approved reference. */ .zonemory-app .zonemory-made{display:grid;grid-template-columns:minmax(0,1fr);width:max-content;max-width:100%} .zonemory-app .zonemory-made-timeline{--zonemory-made-ink:#2f3b50;--zonemory-made-line:#d8dfdd;position:relative;width:0;min-width:100%;margin:18px 0 0;font-family:"Helvetica Neue",Arial,sans-serif} .zonemory-app .zonemory-made-track{position:absolute;z-index:0;top:21px;right:16.66%;left:16.66%;height:1px;background:var(--zonemory-made-line)} .zonemory-app .zonemory-made .zonemory-made-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none} .zonemory-app .zonemory-made .zonemory-made-steps li{min-width:0;margin:0;padding:0;text-align:center} .zonemory-app .zonemory-made-icon{display:grid;place-items:center;width:43px;height:43px;margin:0 auto;color:var(--zonemory-made-ink);background:#fff} .zonemory-app .zonemory-made-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round} .zonemory-app .zonemory-made .zonemory-made-steps h3{margin:7px 0 0;padding:0;font-family:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0;color:var(--zonemory-made-ink);text-transform:none;white-space:nowrap} @media(max-width:560px){ .zonemory-app .zonemory-made-timeline{margin-top:23px} .zonemory-app .zonemory-made .zonemory-made-steps h3{font-size:13px} } /* ---- REQ-V2-0172 (END) ---- */ /* ---- REQ-V2-0173: Made timeline endpoints (BEGIN) ---- Alignment only. Choose sits on the Made sentence's left edge, Preview on its right edge and Personalize stays centred (equal outer columns). The connector spans the full sentence width behind the icons; the outer icon boxes keep the approved 43px square and pin their glyphs to the outer edge (REQ-V2-0174). */ .zonemory-app .zonemory-made-track{right:0;left:0} .zonemory-app .zonemory-made .zonemory-made-steps{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)} .zonemory-app .zonemory-made .zonemory-made-steps li:first-child{justify-self:start;text-align:left} .zonemory-app .zonemory-made .zonemory-made-steps li:nth-child(2){justify-self:center} .zonemory-app .zonemory-made .zonemory-made-steps li:last-child{justify-self:end;text-align:right} .zonemory-app .zonemory-made .zonemory-made-steps li:first-child .zonemory-made-icon{margin:0;place-items:center start} .zonemory-app .zonemory-made .zonemory-made-steps li:last-child .zonemory-made-icon{margin:0 0 0 auto;place-items:center end} /* ---- REQ-V2-0173 (END) ---- */ /* ---- REQ-V2-0175: centred Personalized intro cluster (BEGIN) ---- Alignment only. The Personalized heading, the Made sentence and its timeline centre as one cluster: the head content centres and the max-content Made wrapper sits on margin-inline:auto, so the timeline keeps its endpoint geometry relative to the sentence. Step labels keep their own alignment; the category choices block is untouched. */ .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-head{text-align:center} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-head h2{margin-inline:auto} .zonemory-app .statement.zonemory-personalized-intro .zonemory-personalized-head p{margin-inline:auto} .zonemory-app .zonemory-made{margin-inline:auto;text-align:center} /* ---- REQ-V2-0175 (END) ---- */ /* ---- REQ-V2-0176: Personalized trapezoid cluster + Products intro sync (BEGIN) ---- Three centred tiers widening downward: title, one-line copy, timeline. The copy never wraps; on mobile its size scales with the viewport so it fits the shell with the timeline's extension. The timeline extends past the copy by --zonemory-made-extend on each side (so it is the widest tier) and keeps its endpoints, 43px boxes and 1px connector. The Products intro takes the same heading/body type, spacing and centred pills; its copy and links are unchanged. */ .zonemory-app .zonemory-made{--zonemory-made-extend:56px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-made>p{margin:0;font-size:17px;line-height:1.8;white-space:nowrap} .zonemory-app .zonemory-made-timeline{min-width:calc(100% + 2*var(--zonemory-made-extend));margin-inline:calc(-1*var(--zonemory-made-extend))} .zonemory-app .zonemory-home-group-products .intro-section h2{font-size:46px;margin-bottom:12px} .zonemory-app .zonemory-home-group-products .intro-section p{margin:0 auto;font-size:17px;line-height:1.8} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{justify-content:center;margin-top:40px} @media(max-width:760px){ .zonemory-app .zonemory-made{--zonemory-made-extend:16px} .zonemory-app .statement.zonemory-personalized-intro .zonemory-made>p{font-size:min(15px,calc((100vw - 64px)/21))} .zonemory-app .zonemory-home-group-products .intro-section h2{font-size:37px} .zonemory-app .zonemory-home-group-products .intro-section p{font-size:15px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{margin-top:32px} } /* ---- REQ-V2-0176 (END) ---- */ /* ---- REQ-V2-0177: Products pills on the Personalized pill axis (BEGIN) ---- Alignment only. The Products intro box takes the shell width of the Personalized intro, so its pill row starts on the same left content axis and wraps from it; the heading and description keep their 1000px centred measure. Pill geometry, type, colours, hover, spacing and links are unchanged. */ .zonemory-app .zonemory-home-group-products .intro-section{max-width:1600px} .zonemory-app .zonemory-home-group-products .intro-section>:not(.collection-pills){max-width:1000px;margin-inline:auto} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{justify-content:flex-start} /* ---- REQ-V2-0177 (END) ---- */ /* ---- REQ-V2-0179: homepage type +10%, category frames, no standalone rules (BEGIN) ---- Type: the Made sentence, the Choose/Personalize/Preview labels, the Products description and the four Products pill labels take exactly 110% of their prior responsive sizes. The Made wrapper still shrinks to the (now 10% wider) sentence, so the timeline's min-width and margins are rescaled by 1/1.1 to keep its prior width, centring, endpoints, 43px boxes and 1px connector. Frames: each category pill row is its own fit-content flex box with a 1px var(--line) panel frame; it wraps inside the shell and grows downward as categories are added, and the pills keep their size, border, radius, gap, colours and links. Rules: the group divider (its spacing stays), the homepage header/footer strokes and the Products rail top strokes are removed; the header's soft shadow and every component border stay. */ .zonemory-app .statement.zonemory-personalized-intro .zonemory-made>p{font-size:18.7px} .zonemory-app .zonemory-made-timeline{min-width:calc(100%/1.1 + 2*var(--zonemory-made-extend));margin-inline:calc(100%/22 - var(--zonemory-made-extend))} .zonemory-app .zonemory-made .zonemory-made-steps h3{font-size:13.2px} .zonemory-app .zonemory-home-group-products .intro-section p{font-size:18.7px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills a{font-size:15.4px} .zonemory-app :is(.collection-pills.zonemory-personalized-pills,.zonemory-home-group-products .intro-section .collection-pills){box-sizing:border-box;width:fit-content;max-width:100%;padding:16px;border:1px solid var(--line);border-radius:var(--zonemory-r-panel)} .zonemory-app .zonemory-group-divider{border:0} html body.home .zonemory-app .site-header{border-bottom:0} html body.home .zonemory-app .footer-bottom{border-top:0} html body.home .zonemory-app .product-section.shell{border-top:0} @media(max-width:760px){ .zonemory-app .statement.zonemory-personalized-intro .zonemory-made>p{font-size:min(16.5px,calc((100vw - 64px)*1.1/21))} .zonemory-app .zonemory-home-group-products .intro-section p{font-size:16.5px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills a{font-size:12.1px} .zonemory-app :is(.collection-pills.zonemory-personalized-pills,.zonemory-home-group-products .intro-section .collection-pills){padding:12px} } @media(max-width:560px){.zonemory-app .zonemory-made .zonemory-made-steps h3{font-size:14.3px}} /* ---- REQ-V2-0179 (END) ---- */ /* ---- REQ-V2-0180: Products pills back on REQ-V2-0177 geometry at 110% type (BEGIN) ---- The labels keep their 15.4px/12.1px size. A 10% wider label cannot fit the prior boxes with one shared padding (the needed side padding varies per label), so each of the four current pills takes its REQ-V2-0177 border-box width with centred text and no inline padding, and the line box is pinned to the prior line height so the height is unchanged. Border, radius, gap, colours, text, links and row wrapping are untouched; any later pill keeps the shared padding. */ .zonemory-app .zonemory-home-group-products .intro-section .collection-pills a{line-height:21.03px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(-n+4){box-sizing:border-box;padding-inline:0;text-align:center} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(1){width:129.98px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(2){width:172.45px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(3){width:174.65px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(4){width:176.27px} @media(max-width:760px){ .zonemory-app .zonemory-home-group-products .intro-section .collection-pills a{line-height:16.38px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(1){width:98.13px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(2){width:131.5px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(3){width:133.23px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(4){width:134.5px} } /* ---- REQ-V2-0180 (END) ---- */ /* ---- REQ-V2-0181: Products pill heights pinned to REQ-V2-0177 (BEGIN) ---- The pinned line height left the border boxes ~0.67px short, so each of the four current pills takes an explicit border-box height with no block padding and its label centred on both axes. Type, widths, border, radius, gap, colours, text, links and row wrapping are untouched. */ .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(-n+4){display:flex;align-items:center;justify-content:center;height:41.03px;padding-block:0} @media(max-width:760px){ .zonemory-app .zonemory-home-group-products .intro-section .collection-pills>a:nth-child(-n+4){height:34.38px} } /* ---- REQ-V2-0181 (END) ---- */ /* ---- REQ-V2-0183: full-width darker category frames (BEGIN) ---- Outer frame only: the Personalized and Products pill rows span 100% of their shell with equal side alignment and a 1px #cfd3ce border; radius, padding, auto height and flex wrapping are unchanged, so added categories wrap to new rows and the frame grows downward. Pill size, type, colours, borders, radii, gaps, alignment, text and links are untouched. */ .zonemory-app :is(.collection-pills.zonemory-personalized-pills,.zonemory-home-group-products .intro-section .collection-pills){width:100%;max-width:100%;height:auto;margin-inline:0;border-color:#cfd3ce} /* ---- REQ-V2-0183 (END) ---- */ /* ---- REQ-V2-0186: tighter group spacing, no Personalized card eyebrows (BEGIN) ---- Vertical gaps only: Personalized intro top/bottom, timeline-to-category frame, Personalized-to-Products separation, Products intro top and pills-to-first-rail. Personalized editorial cards drop their small category eyebrow (its margin goes with it), so the title leads the copy as on the Products cards. Card/image sizes, editorial gaps, frames, pills, type, colours, content and links are unchanged. */ .zonemory-app .statement.zonemory-personalized-intro{padding-block:64px 36px} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:28px} .zonemory-app .zonemory-group-divider{margin-top:32px} .zonemory-app .zonemory-home-group-products .intro-section{padding-top:56px;padding-bottom:20px} .zonemory-app .personalized-feature .editorial-copy .eyebrow{display:none} @media(max-width:760px){ .zonemory-app .statement.zonemory-personalized-intro{padding-block:40px 28px} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:24px} .zonemory-app .zonemory-group-divider{margin-top:24px} .zonemory-app .zonemory-home-group-products .intro-section{padding-top:40px;padding-bottom:16px} } /* ---- REQ-V2-0186 (END) ---- */ /* ---- REQ-V2-0187: Products intro top gap over the #products rule (BEGIN) ---- zonemory-poster.css sets .zonemory-app #products{padding-top:70px|40px}, which outranks the class-only REQ-V2-0186 rule. :is(#products,*) matches the same intro but carries ID weight, so the approved 56px/40px top padding wins. */ .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:56px} @media(max-width:760px){ .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:40px} } /* ---- REQ-V2-0187 (END) ---- */ /* ---- REQ-V2-0199: site-wide vertical compaction (BEGIN) ---- External gaps only, about 30-40% tighter: page intro to heading, heading to category frame, frame to rail, rail to rail, detail sections, Extras rows and footer blocks. Margins, padding and gaps alone: no fixed heights or clipping, and card, image, pill, frame and control geometry, type, colours and content are unchanged. The Hot! row's 16px top room stays. */ /* Homepage: Personalized */ .zonemory-app .statement.zonemory-personalized-intro{padding-block:40px 24px} .zonemory-app .zonemory-personalized-head h2{margin-bottom:8px} .zonemory-app .zonemory-made-timeline{margin-top:12px} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:18px} .zonemory-app .zonemory-personalized-features{gap:18px;margin-bottom:18px} .zonemory-app .zonemory-group-divider{margin-top:20px} /* Homepage: Products intro and rails */ .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:36px} .zonemory-app .zonemory-home-group-products .intro-section{padding-bottom:14px} .zonemory-app .zonemory-home-group-products .intro-section h2{margin-bottom:8px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{margin-top:26px} .zonemory-app .product-section{padding-top:28px;padding-bottom:30px} .zonemory-app .section-heading{margin-bottom:17px} /* Catalog pages */ .zonemory-app .breadcrumb{padding-block:14px} .zonemory-app .catalog{padding-bottom:42px} .zonemory-app .catalog-heading{padding:26px 0 22px} .zonemory-app .catalog-heading h1{margin-bottom:10px} .zonemory-app .catalog-heading p{margin-bottom:12px} .zonemory-app .catalog-search.zonemory-catalog-search{padding-block:16px} .zonemory-app .product-grid{row-gap:26px} .zonemory-app .catalog-disclaimer{margin-top:26px} /* Product detail and related products */ .zonemory-app .ready-detail{padding-bottom:50px} .zonemory-app .personalizer{padding-block:10px 44px} .zonemory-app .product-tagline{margin-bottom:12px} .zonemory-app :is(.ready-detail,.personalizer) .price-line{margin-bottom:14px} .zonemory-app .ready-detail-copy .zonemory-buy{margin:12px 0} .zonemory-app .map-disclosure{margin-top:10px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section{margin-bottom:11px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section .tm-section-label{padding:11px 0 8px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-epo-section:has(.zonemory-x-div) .tm-section-label{padding:7px 0 3px} .zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options .cpf-element:is(.zonemory-f-opt-material-div,.zonemory-f-opt-size-div,.zonemory-f-opt-frame-div){margin-bottom:11px} .zonemory-app :is(.ready-detail,.personalizer) .zonemory-f-div{margin-bottom:10px} .zonemory-app :is(.ready-detail,.personalizer) .tc-epo-totals{margin:4px 0 12px} .zonemory-app .zonemory-delivery{margin:4px 0 14px;padding-top:12px} .zonemory-app .zonemory-delivery-intro{margin-bottom:12px} .zonemory-app .zonemory-delivery-steps{margin-bottom:10px} .zonemory-app .product-details{padding-top:12px} .zonemory-app .related{padding-bottom:50px} .zonemory-app .related h2{margin-bottom:20px} /* The 40px mobile Extras tap rows keep their own zero padding. */ @media(min-width:761px){.zonemory-app :is(.ready-detail,.personalizer) .tm-extra-product-options ul.zonemory-x-ul>li.tmcp-field-wrap{padding:2.5px 0!important}} /* Footer: the logo margin lives in zonemory-brand.css, which loads later, so it takes one more element of weight. */ .zonemory-app .footer{padding-top:40px} .zonemory-app .footer-grid{padding-bottom:30px} html .zonemory-app .footer-brand>a{margin-bottom:14px} .zonemory-app .footer-grid p{margin:8px 0} .zonemory-app .footer h2{margin-bottom:15px} .zonemory-app .footer-grid nav a{margin-bottom:7px} html body .zonemory-app .footer ul.zonemory-contact-list{gap:10px} html body .zonemory-app .footer ul.zonemory-social{margin-top:13px} .zonemory-app .footer-bottom{padding-block:14px} .zonemory-app .source-credit{padding-bottom:14px} @media(max-width:1100px){.zonemory-app .footer-grid{row-gap:26px}} @media(max-width:760px){ .zonemory-app .statement.zonemory-personalized-intro{padding-block:26px 18px} .zonemory-app .zonemory-personalized-intro>div+div{margin-top:16px} .zonemory-app .zonemory-personalized-features{gap:14px;margin-bottom:14px} .zonemory-app .zonemory-group-divider{margin-top:16px} .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:26px} .zonemory-app .zonemory-home-group-products .intro-section{padding-bottom:10px} .zonemory-app .zonemory-home-group-products .intro-section .collection-pills{margin-top:20px} .zonemory-app .product-section{padding-block:20px} .zonemory-app .section-heading{margin-bottom:13px} .zonemory-app .breadcrumb{padding-block:12px} .zonemory-app .catalog-heading{padding:14px 0 16px} .zonemory-app .catalog-search.zonemory-catalog-search{padding-block:14px} .zonemory-app .product-grid{row-gap:18px} .zonemory-app .ready-detail{gap:20px;padding-bottom:30px} .zonemory-app .personalizer{padding-top:0;padding-bottom:26px} .zonemory-app .preview-column{margin-bottom:18px} .zonemory-app .related{padding-bottom:32px} .zonemory-app .footer{padding-top:26px} .zonemory-app .footer-grid{row-gap:20px} html .zonemory-app .footer-brand>a{margin-bottom:10px} .zonemory-app .footer h2{margin-bottom:11px} } @media(max-width:560px){.zonemory-app .zonemory-made-timeline{margin-top:15px}} @media(max-width:370px){.zonemory-app .footer-grid{row-gap:18px}} /* ---- REQ-V2-0199 (END) ---- */ /* ---- REQ-V2-0206: homepage group labels and divider (BEGIN) ---- A small label sits above each group title. The group divider returns as one 1px #cfd3ce rule in the shell width (supersedes the REQ-V2-0179 removal), 28px clear on each side (20px on mobile): its top margin collapses with the editorial block's bottom margin, and the Products intro's top padding sets the gap below. Cards, images, pills, frames, backgrounds and controls are unchanged. */ .zonemory-app .zonemory-group-label{display:block;margin-bottom:6px;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.08em;color:#64748b} .zonemory-app .zonemory-group-divider{margin-top:28px;border-top:1px solid #cfd3ce} .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:28px} @media(max-width:760px){ .zonemory-app .zonemory-group-divider{margin-top:20px} .zonemory-app .zonemory-home-group-products .intro-section:is(#products,*){padding-top:20px} } /* ---- REQ-V2-0206 (END) ---- */ /* ---- REQ-V2-0219: Track Order intro shares the page container left edge with the WooCommerce form (BEGIN) ---- */ html body #content .zonemory-info-track-order{max-width:none;margin-left:0;margin-right:0} /* ---- REQ-V2-0219 (END) ---- */