/* Theme Name: Affan Child Theme URI: https://affanecom.com Description: Child theme for Affan (AFFAN ECOM LLC). Holds the site's own template hooks and styles. Author: AFFAN ECOM LLC Template: astra Version: 2.0.638 Text Domain: affan-child */ /* Blog index header - the posts page is rendered by Astra, not Elementor, so it ships without an H1. */ .affan-blog-head{max-width:1240px;margin:0 auto 40px;padding:56px 20px 0} .affan-blog-head h1{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(2rem,1.4rem + 2.4vw,2.75rem);line-height:1.15;letter-spacing:-.015em;color:#2C2F33;margin:0 0 12px} .affan-blog-head p{font-family:Inter,sans-serif;font-size:17px;line-height:1.7;color:#6B7280;max-width:62ch;margin:0} /* Search: input + button share one line and fill the column. */ .xpro-theme-builder-header .elementor-widget-xpro-search{width:100%} .xpro-theme-builder-header .xpro-elementor-search-wrapper{width:100%} .xpro-theme-builder-header .xpro-elementor-search-input-group{display:flex;width:100%} .xpro-theme-builder-header .xpro-elementor-search-input-group input[type=text]{flex:1;min-width:0} /* Utility links stay on one line; the long delivery message may wrap. */ .xpro-theme-builder-header .elementor-widget-xpro-button, .xpro-theme-builder-header .xpro-infolist-title{white-space:nowrap} /* Footer column headings and body copy wrap normally. */ #xpro-theme-builder-footer .xpro-infolist-title{white-space:normal} @media (max-width:1024px){ .xpro-theme-builder-header .elementor-widget-xpro-heading{white-space:normal} } /* --------------------------------------------------------------- Astra container double-constrains Elementor pages. Astra sets .ast-container to max-width:1240px AND padding:0 20px, then each Elementor section adds its own 1240px boxed width plus 20px padding inside it. Page content therefore renders 1160px wide while the Xpro header - which sits outside .ast-container - renders 1200px, leaving every page inset ~20px more than the header. Releasing the outer constraint lets Elementor's own boxed width be the single source of truth, so content lines up with the header. Scoped to .elementor-template-full-width so Astra's blog and archive layouts keep their normal container. --------------------------------------------------------------- */ .elementor-template-full-width .site-content .ast-container{ max-width:100%; padding-left:0; padding-right:0; } /* Header tools: wishlist / account / cart. One rule set for all three so icon size, baseline and spacing match. Icons are inline SVG sized in em, so they track the text. */ .affan-tools{display:flex;align-items:center;gap:26px} .affan-tool{display:inline-flex;align-items:center;gap:10px;color:#2C2F33; text-decoration:none;line-height:1.25;white-space:nowrap} .affan-tool:hover{color:#C74E00} .affan-tool__ico{position:relative;display:inline-flex;color:#FF6B00;flex:0 0 auto} .affan-tool__svg{width:24px;height:24px;display:block} .affan-tool__count{position:absolute;top:-7px;right:-8px;min-width:16px;height:16px; padding:0 4px;border-radius:8px;background:#FF6B00;color:#fff; font:700 10px/16px Inter,sans-serif;text-align:center} .affan-tool__txt{display:flex;flex-direction:column} .affan-tool__txt small{font-size:11px;font-weight:400;color:#6B7280} .affan-tool__txt strong{font-size:14px;font-weight:700} .affan-tool .woocommerce-Price-amount{font-size:14px;font-weight:700} /* Wordmark and descriptor share a left edge. */ .xpro-theme-builder-header .xpro-heading-title{text-align:left} /* Storefront sections (homepage). Brand: charcoal #2C2F33, accent #FF6B00, accent text #C74E00 for anything on white (WCAG AA). */ .affan-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .affan-sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:#2C2F33;margin:0} .affan-sec-head a{font-size:14px;font-weight:700;color:#C74E00;text-decoration:none;white-space:nowrap} /* Collection carousel: scroll-snap row, no JS. */ .affan-collections{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:16px; overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin} .affan-collection{scroll-snap-align:start;text-decoration:none;display:block;border:1px solid #E5E7EB; border-radius:12px;overflow:hidden;background:#fff;transition:border-color .18s,transform .18s} .affan-collection:hover{border-color:#FF6B00;transform:translateY(-2px)} .affan-collection__img{display:block;aspect-ratio:4/3;overflow:hidden;background:#F8F9FB} .affan-collection__img img{width:100%;height:100%;object-fit:cover;display:block} .affan-collection__name{display:block;padding:12px 14px;font-size:14px;font-weight:700;color:#2C2F33;text-align:center} /* Pill category links. */ .affan-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .affan-pill{padding:9px 18px;border:1px solid #E5E7EB;border-radius:999px;font-size:13px;font-weight:700; color:#2C2F33;text-decoration:none;background:#fff;transition:all .18s} .affan-pill:hover{background:#FF6B00;border-color:#FF6B00;color:#fff} /* Product tabs: radio inputs drive the panes, so no JS and cache-safe. */ .affan-ptabs{--pane:0} .affan-ptab__radio{position:absolute;opacity:0;pointer-events:none} .affan-ptab__label{display:inline-block;padding:10px 20px;margin:0 6px 18px 0;border:1px solid #E5E7EB; border-radius:999px;font-size:14px;font-weight:700;color:#6B7280;cursor:pointer;background:#fff;transition:all .18s} .affan-ptab__label:hover{color:#2C2F33;border-color:#2C2F33} .affan-ptab__radio:checked + .affan-ptab__label{background:#2C2F33;border-color:#2C2F33;color:#fff} .affan-ptab__radio:focus-visible + .affan-ptab__label{outline:2px solid #FF6B00;outline-offset:2px} .affan-ptab__pane{display:none} #affan-tab-best:checked ~ .affan-ptab__panes [data-pane=best], #affan-tab-new:checked ~ .affan-ptab__panes [data-pane=new], #affan-tab-sale:checked ~ .affan-ptab__panes [data-pane=sale]{display:block} /* WooCommerce loop inside the tabs. */ .affan-ptab__pane ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;padding:0;list-style:none} .affan-ptab__pane ul.products li.product{width:auto!important;margin:0!important;float:none!important; border:1px solid #E5E7EB;border-radius:12px;padding:12px;background:#fff;position:relative;transition:border-color .18s} .affan-ptab__pane ul.products li.product:hover{border-color:#FF6B00} .affan-ptab__pane ul.products li.product img{border-radius:8px;aspect-ratio:1/1;object-fit:cover} .affan-ptab__pane .woocommerce-loop-product__title{font-size:14px!important;font-weight:600;color:#2C2F33;padding:10px 0 4px!important} .affan-ptab__pane .price{font-size:15px;font-weight:800;color:#2C2F33} .affan-ptab__pane .price del{font-weight:500;color:#9CA3AF;margin-right:6px} .affan-ptab__pane .price ins{text-decoration:none;color:#C74E00} .affan-ptab__pane span.onsale{background:#FF6B00;color:#fff;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;top:16px;left:16px;margin:0} .affan-ptab__pane .button{background:#2C2F33;color:#fff;border-radius:8px;font-size:13px;font-weight:700} .affan-ptab__pane .button:hover{background:#FF6B00;color:#fff} /* FAQ:
so it works with JS disabled. */ .affan-faq{max-width:820px;margin:0 auto} .affan-faq__item{border:1px solid #E5E7EB;border-radius:10px;margin-bottom:10px;background:#fff} .affan-faq__item summary{cursor:pointer;padding:16px 18px;font-size:15px;font-weight:700;color:#2C2F33;list-style:none;display:flex;justify-content:space-between;gap:12px} .affan-faq__item summary::-webkit-details-marker{display:none} .affan-faq__item summary::after{content:'+';color:#FF6B00;font-size:20px;line-height:1;font-weight:700} .affan-faq__item[open] summary::after{content:'\2212'} .affan-faq__a{padding:0 18px 16px;font-size:14px;line-height:1.65;color:#6B7280} @media (max-width:1024px){.affan-ptab__pane ul.products{grid-template-columns:repeat(3,1fr)}} @media (max-width:767px){.affan-ptab__pane ul.products{grid-template-columns:repeat(2,1fr);gap:12px} .affan-collections{grid-auto-columns:minmax(150px,1fr)}}