/* WordPress / WooCommerce structural overrides that complement styles.css */ /* Safety net: never let any single element create horizontal page scroll. The marquee / sticky elements / 100vw image sections occasionally push the viewport on small screens; clipping at + stops the page itself from being scrollable sideways without breaking inner scrolling regions. */ html,body{max-width:100%;overflow-x:hidden} img,video,iframe{max-width:100%;height:auto} /* Logo-variant visibility: driven by html[data-logo] */ html[data-logo="en"] .wm-ur { display:none !important; } html[data-logo="ur"] .wm-en { display:none !important; } html[data-logo="en"] .logo-toggle button[data-logo="en"], html[data-logo="ur"] .logo-toggle button[data-logo="ur"] { background:var(--ink); color:var(--paper); } /* Skip link */ .skip-link.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link.screen-reader-text:focus{position:fixed;left:20px;top:20px;width:auto;height:auto;padding:10px 14px;background:var(--ink);color:var(--paper);z-index:9999;font-size:12px;letter-spacing:.22em;text-transform:uppercase} /* Strip Woo default wrappers we don't want */ .woocommerce-notices-wrapper:empty{display:none} .woocommerce-breadcrumb{padding:18px 40px;border-bottom:1px solid var(--hair);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .woocommerce-breadcrumb a{color:var(--muted)} .woocommerce-breadcrumb a:hover{color:var(--ink)} /* Woo pagination */ .woocommerce-pagination{text-align:center;margin-top:64px;padding-top:36px;border-top:1px solid var(--hair)} .woocommerce-pagination ul{list-style:none;display:inline-flex;gap:6px;padding:0} .woocommerce-pagination li a, .woocommerce-pagination li span{display:inline-block;padding:10px 14px;border:1px solid var(--hair);font-size:11px;letter-spacing:.22em;text-transform:uppercase} .woocommerce-pagination li .current{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* Woo cart/checkout page wrappers — wider so the two-column checkout has room to breathe */ .woocommerce .cart-collaterals, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{padding:40px 40px 80px;max-width:1360px;margin:0 auto} .woocommerce-checkout .woocommerce{max-width:1160px} /* Stop the checkout's billing/shipping/order-review columns from collapsing to ~480px */ .woocommerce-checkout .woocommerce form.checkout{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start} .woocommerce-checkout .woocommerce form.checkout #customer_details{grid-column:1} .woocommerce-checkout .woocommerce form.checkout #order_review_heading, .woocommerce-checkout .woocommerce form.checkout #order_review{grid-column:2} .woocommerce-checkout .woocommerce form.checkout .col2-set{display:block} .woocommerce-checkout .woocommerce form.checkout .col2-set .col-1, .woocommerce-checkout .woocommerce form.checkout .col2-set .col-2{width:100%;float:none;padding:0;margin-bottom:24px} @media (max-width:900px){ .woocommerce-checkout .woocommerce form.checkout{grid-template-columns:1fr;gap:40px} } .woocommerce table.shop_table{border-collapse:collapse;width:100%} .woocommerce table.shop_table th, .woocommerce table.shop_table td{border-bottom:1px solid var(--hair);padding:18px 14px;font-size:13px} .woocommerce table.shop_table th{font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-align:left;font-weight:600} .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;font-weight:500;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0;cursor:pointer} .woocommerce a.button.alt, .woocommerce button.button.alt{background:var(--ink);color:var(--paper)} .woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--paper);color:var(--ink)} .woocommerce-form-login, .woocommerce-form-coupon, .woocommerce form .form-row{font-size:13px} .woocommerce form .form-row label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:block} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select{width:100%;padding:12px 0;border:none;border-bottom:1px solid var(--hair);background:transparent;font-family:inherit;font-size:14px;outline:none} .woocommerce form .form-row input.input-text:focus{border-bottom-color:var(--ink)} /* Cart page price formatting */ .woocommerce .quantity input.qty{width:60px;padding:8px;border:1px solid var(--hair);text-align:center} .woocommerce .price, .woocommerce-Price-amount{font-family:inherit;letter-spacing:.04em} /* Added-to-cart notice styling */ .woocommerce-message, .woocommerce-info, .woocommerce-error{border:1px solid var(--ink);background:var(--cream);color:var(--ink);padding:14px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px} /* Urdu font when data-logo=ur on wordmarks */ html[data-logo="ur"] .brandmark .wm-ur{font-family:"Noto Sans Arabic",sans-serif;font-weight:800} /* Drawer scroll lock */ body.drawer-open{overflow:hidden} /* ===== Contact form ===== */ .farhat-contact-form{display:flex;flex-direction:column;gap:18px;margin-top:14px} .farhat-contact-form .form-row{display:flex;flex-direction:column;gap:6px} .farhat-contact-form .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .farhat-contact-form .form-row-2 > div{display:flex;flex-direction:column;gap:6px} .farhat-contact-form label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .farhat-contact-form input[type=text], .farhat-contact-form input[type=email], .farhat-contact-form input[type=tel], .farhat-contact-form select, .farhat-contact-form textarea{ border:none;border-bottom:1px solid var(--hair);background:transparent; padding:10px 0;font:inherit;font-size:15px;color:var(--ink); outline:none;resize:vertical;border-radius:0; } .farhat-contact-form input:focus, .farhat-contact-form select:focus, .farhat-contact-form textarea:focus{border-bottom-color:var(--ink)} .farhat-contact-form .form-submit{align-self:flex-start;margin-top:8px} .farhat-contact-form .form-success, .farhat-contact-form .form-error{padding:14px 16px;border:1px solid var(--ink);background:var(--cream);font-size:13px;color:var(--ink);line-height:1.6} .farhat-contact-form .form-success .eyebrow{margin-bottom:6px} .farhat-contact-form .form-error{background:#fff;border-color:var(--ink)} /* ===== Coming Soon ===== */ .coming-soon{display:grid;grid-template-columns:1.05fr 1fr;min-height:calc(100vh - 120px);border-bottom:1px solid var(--hair)} .coming-soon .cs-text{padding:80px 80px 96px;display:flex;flex-direction:column;justify-content:center;gap:20px;max-width:620px} .coming-soon .cs-text .eyebrow{color:var(--muted)} .coming-soon h1{font-family:"Cormorant Garamond",serif;font-size:clamp(48px,5.4vw,80px);line-height:1;font-weight:400;letter-spacing:-0.02em} .coming-soon h1 em{font-style:italic;font-weight:300} .coming-soon .cs-body{color:#333;line-height:1.8;max-width:48ch} .coming-soon .cs-body p{margin-bottom:10px} .coming-soon dl.cs-meta{display:flex;flex-wrap:wrap;gap:24px;margin:8px 0 8px;padding-top:18px;border-top:1px solid var(--hair)} .coming-soon dl.cs-meta > div{min-width:140px} .coming-soon dl.cs-meta dt{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .coming-soon dl.cs-meta dd{font-size:14px;color:var(--ink)} .coming-soon .cs-form{margin-top:18px;padding-top:24px;border-top:1px solid var(--hair)} .coming-soon .cs-form .cs-form-note{color:var(--muted);font-size:12px;line-height:1.7;max-width:46ch} .coming-soon .cs-image{position:relative;background:var(--cream)} .coming-soon .cs-image .plate{position:absolute;inset:0} .coming-soon .cs-image > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media (max-width:900px){ .coming-soon{grid-template-columns:1fr;min-height:auto} .coming-soon .cs-text{padding:48px 20px;max-width:100%} .coming-soon .cs-image{aspect-ratio:4/5} .farhat-contact-form .form-row-2{grid-template-columns:1fr} } /* ========================================================================= Product card — keep Quick Add white-on-black, overriding the global Woo button override (which paints all .button elements solid black). ========================================================================= */ .product .quick a.button, .product .quick a.add_to_cart_button, .product .quick button.button, .product .quick .added_to_cart{ background:var(--paper)!important; color:var(--ink)!important; border:1px solid var(--ink)!important; padding:10px 14px!important; font-size:10px!important; letter-spacing:0.22em!important; text-transform:uppercase!important; font-weight:500!important; width:100%; } .product .quick a.button:hover, .product .quick a.add_to_cart_button:hover, .product .quick button.button:hover{ background:var(--ink)!important; color:var(--paper)!important; } /* Soft cream backdrop so product images sit on a surface rather than bleeding into the page, especially when product photos themselves have white curtains/walls behind the subject. */ .product .img{background:var(--cream)} .product .img > img, .product .img .plate-img{width:100%;height:100%;object-fit:cover;display:block} /* ========================================================================= Lookbook — readable captions regardless of tone (scrim on every panel) ========================================================================= */ .lookbook .panel::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:55%; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.55) 100%); z-index:2;pointer-events:none; } .lookbook .caption{color:#fff!important;z-index:3} .lookbook .caption h3{color:#fff!important} .lookbook .caption .eyebrow{color:rgba(255,255,255,0.85)!important} .lookbook .caption .btn{background:transparent!important;color:#fff!important;border-color:#fff!important} .lookbook .caption .btn:hover{background:#fff!important;color:var(--ink)!important} /* ========================================================================= Two-Voices wordmark section (EN | UR) — stack on small screens ========================================================================= */ .two-voices-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:60px;align-items:center;max-width:1100px;margin:0 auto} @media (max-width:760px){ .two-voices-grid{grid-template-columns:1fr;gap:40px} .two-voices-grid > .two-voices-divider{display:none} .two-voices-grid .wm-block{font-size:48px!important;letter-spacing:0.3em!important} .two-voices-grid .wm-block-ur{font-size:60px!important} .two-voices-grid .crest-mark{width:60px!important;height:60px!important} } /* ========================================================================= Shop archive filters — collapsible

on mobile only ========================================================================= */ /* Shop archive filters — show inline on desktop, collapse behind a button on mobile. Toggle is JS-driven via .filters-open on the parent .filters element. */ .filters .filters-summary{display:none} .filters .filters-content{display:block} @media (max-width:900px){ .filters{position:relative} .filters .filters-summary{ display:flex;justify-content:space-between;align-items:center;width:100%; cursor:pointer; padding:14px 16px;border:1px solid var(--ink);background:var(--paper);color:var(--ink); font-size:11px;letter-spacing:0.28em;text-transform:uppercase;font-weight:600;font-family:inherit; } .filters .filters-summary::after{content:"+";font-size:18px;font-weight:300;line-height:1} .filters.filters-open .filters-summary::after{content:"–"} .filters .filters-content{display:none} .filters.filters-open .filters-content{display:block;margin-top:14px} } /* ========================================================================= Hero CTA buttons — keep inside the viewport on phones/small tablets. Aggressive overrides because the global .btn is inline-flex with wide padding. ========================================================================= */ @media (max-width:768px){ .hero-actions{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:10px!important; width:100%!important; max-width:100%!important; min-width:0!important; } .hero-actions .btn, .hero-actions a.btn, .hero-actions a.btn-dark{ display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; padding:14px 14px!important; font-size:10px!important; letter-spacing:0.14em!important; line-height:1.2!important; white-space:nowrap!important; text-align:center!important; } } /* ========================================================================= PDP gallery on mobile — horizontal thumb strip below the main image ========================================================================= */ @media (max-width:900px){ .pdp-gallery{ grid-template-columns:1fr!important; grid-template-rows:auto auto; gap:12px;padding:16px; } .pdp-gallery .pdp-main{grid-row:1;aspect-ratio:3/4} .pdp-gallery .pdp-thumbs{ grid-row:2; flex-direction:row!important; overflow-x:auto; gap:8px; padding-bottom:4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .pdp-gallery .pdp-thumbs .tb{ flex:0 0 22%; width:auto; scroll-snap-align:start; } } /* ========================================================================= Small screens — overall responsive tightening ========================================================================= */ @media (max-width:640px){ .nav-row{grid-template-columns:auto 1fr auto;padding:14px 16px;gap:12px} .nav-left, .catstrip{display:none} .brandmark .wm-en{font-size:18px;letter-spacing:0.28em} .brandmark .wm-ur{font-size:20px} .brandmark .crest{width:24px;height:24px} /* Hide the EN/Urdu pill on mobile — it overlapped the brandmark. The same toggle is available in the desktop nav and via the Two-Voices section further down the page. */ .logo-toggle{display:none} .hero{grid-template-columns:1fr;min-height:auto} .hero-img{aspect-ratio:4/5} .hero-copy{padding:36px 20px;gap:18px;min-width:0;max-width:100%;overflow:hidden} .hero-copy h1{font-size:44px;word-break:break-word} .section{padding:56px 20px} .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:28px} .section-head h2{font-size:32px} .collections{grid-template-columns:1fr} .grid{grid-template-columns:repeat(2,1fr);gap:24px 12px} .grid.cols-3{grid-template-columns:repeat(2,1fr)} .product .img{margin-bottom:10px} .product h4{font-size:17px} .product .price{font-size:11px} .lookbook{grid-template-columns:1fr;min-height:auto} .lookbook .panel{aspect-ratio:4/5} .lookbook .caption{left:24px;right:24px;bottom:28px} .lookbook .caption h3{font-size:26px} .editorial{grid-template-columns:1fr} .editorial-img{aspect-ratio:4/5} .editorial-text{padding:40px 20px} .editorial-text h2{font-size:36px} .footer{padding:48px 20px 24px} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .footer-bottom{flex-direction:column;gap:12px;text-align:center} .shop-layout{grid-template-columns:1fr;padding:20px 16px 60px;gap:24px} .filters{border:none;padding:0} .shop-hero{padding:40px 20px 24px} .shop-hero h1{font-size:44px} .pdp{grid-template-columns:1fr} .pdp-info{padding:32px 20px;position:static} .pdp-info h1{font-size:32px} .benefits{grid-template-columns:1fr 1fr} .drawer{width:100%} .marq-item{font-size:44px} }