tags a rich-text-edited description has), not just on descendant
elements — some existing product descriptions are stored as plain text with no
markup at all, and targeting only "p" would silently do nothing there. */
.tabs .content-block{max-width:100%;text-align:justify}
.related{margin-top:2rem}
/* "You May Also Like" reuses the shared .product-grid, but that grid's
auto-fit columns are deliberately meant to stretch a short row to fill
the container (see the Homepage/Shop grid comments) — great for a
catalog listing that's nearly always full, wrong here: a related-products
rail can legitimately have just 1-3 items (a niche product with few
catalog-mates), and auto-fit would blow a single card up to the full
container width, looking broken rather than intentional.
An earlier fix used auto-fill + minmax(190px,220px) to cap the card size
instead — that stops the stretch, but auto-fill still works by reserving
as many tracks as fit the container and only THEN placing items into
them, and different browsers/versions don't agree on what happens to a
track auto-fill reserved that no item ends up using (some quietly absorb
the leftover space into the other cards, some leave it as a visible
empty box the exact size of a card — confirmed happening in a real
browser even after a full server restart ruled out caching). Rather than
depend on that inconsistent leftover-space behavior at all, this uses a
fixed, explicit column count per breakpoint (matched to a $limit of 10
in atn_related_products() so every breakpoint's column count divides it
evenly): there's no "reserved but unfilled" track possible when the
column count and item count are both fixed numbers chosen to fit
exactly, so every row — including the first — is always fully populated
in every browser. */
.related .product-grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){
.related .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
.related .product-grid{grid-template-columns:1fr}
}
/* Content pages (about/policies/local-seo pages/blog) */
.content-page{max-width:800px;margin:0 auto;padding:2rem 0 3rem}
.content-page img{border-radius:var(--radius);margin:1rem 0}
.content-page h1{font-size:1.8rem}
.content-page iframe{max-width:100%;border-radius:var(--radius)}
/* Blog post FAQ accordion — admin-editable per post (Admin → Blog Posts →
edit), rendered here via native rather than a
JS-driven widget: it's keyboard/screen-reader accessible and works with
zero script, and this content's whole point (an FAQ section) is meant to
be readable/crawlable even with JS disabled. See atn_faq_jsonld() in
inc/bootstrap.php for the matching FAQPage structured data emitted
alongside this markup. */
.faq-section{margin-top:2.5rem;border-top:1px solid var(--border);padding-top:1.5rem}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.7rem;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:1rem 2.6rem 1rem 1.2rem;font-weight:700;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.3rem;font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--accent)}
.faq-answer{padding:0 1.2rem 1.1rem;color:var(--text-dim);text-align:justify}
/* Homepage FAQ teaser (inc/render-home.php): sits right under its own
.section-head heading + "View all" link, which already provides the
visual separation .faq-section's default top border/margin is for on a
blog post/FAQ page — so that spacing is zeroed out here specifically. */
.faq-section.home-faq-list{margin-top:0;border-top:none;padding-top:0}
/* Sex Toy Videos page — gallery synced from the YouTube channel's feed by
atn_youtube_sync() (inc/bootstrap.php); this is layout only. Wider than
the plain prose .content-page pages, so override that max-width back to
the site's normal container width. */
.videos-page{max-width:var(--maxw)}
.videos-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.videos-page-sub{color:var(--text-dim);margin:.4rem 0 0;font-size:.95rem;max-width:52ch}
.videos-channel-link{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;flex:0 0 auto}
.videos-empty{text-align:center;padding:3rem 1.5rem;font-size:1rem}
.video-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:2.6rem}
.video-hero-frame{aspect-ratio:16/9;background:#000}
.video-hero-frame iframe{width:100%;height:100%;border:0;display:block}
.video-hero-info{padding:1.3rem 1.5rem 1.5rem}
.video-hero-info h2{font-size:1.35rem;margin:0 0 .4rem;color:#fff}
.video-hero-date{color:var(--text-dim);font-size:.85rem}
.videos-more-heading{font-size:1.15rem;margin:0 0 1rem;color:#fff}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.3rem;margin-bottom:2rem}
.video-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.video-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 24px var(--accent-glow);text-decoration:none}
.video-card-thumb{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.video-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(18,9,18,.32);opacity:0;transition:opacity .15s ease}
.video-card-play::after{content:'▶';display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(2px);color:#fff;font-size:1.2rem;padding-left:4px}
.video-card:hover .video-card-play{opacity:1}
.video-card-body{padding:.85rem .9rem 1rem}
.video-card-title{font-size:.92rem;font-weight:600;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.4rem}
.video-card-date{color:var(--text-dim);font-size:.8rem}
@media (max-width:600px){
.videos-page-head{flex-direction:column;align-items:stretch}
.videos-channel-link{justify-content:center}
}
/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.blog-card img{aspect-ratio:16/10;object-fit:cover}
.blog-card .body{padding:1rem}
.blog-card time{color:var(--text-dim);font-size:.78rem}
/* Cart / checkout */
.cart-table-wrap{overflow-x:auto}
table.cart-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
table.cart-table th,table.cart-table td{padding:.7rem .5rem;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
table.cart-table img{width:56px;height:56px;object-fit:cover;border-radius:8px}
table.cart-table .qty-stepper button{width:28px;height:28px}
table.cart-table .qty-stepper input{width:36px;height:28px}
.cart-summary{max-width:360px;margin-left:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem}
.cart-summary .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2em .6em;margin-bottom:.6rem;font-size:.92rem}
.cart-summary .row>span:last-child{text-align:right}
.cart-summary .row.total{font-weight:800;font-size:1.1rem;border-top:1px solid var(--border);padding-top:.6rem;color:var(--accent-2)}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-dim)}
form.checkout-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;max-width:640px}
form.checkout-form .full{grid-column:1/-1}
@media (max-width:640px){form.checkout-form{grid-template-columns:1fr}}
label{display:block;font-size:.82rem;color:var(--text-dim);margin-bottom:.3rem;font-weight:600}
.field-required{color:var(--accent-2);font-weight:700}
.field-optional{color:var(--text-dim);font-weight:500}
.checkout-cart-block{margin:1.5rem 0 2rem}
.checkout-cart-block h2{margin-bottom:.8rem}
input[type=text],input[type=tel],input[type=email],input[type=number],textarea,select{
width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);
padding:.65em .8em;border-radius:8px;font-size:.92rem;font-family:inherit;
}
textarea{resize:vertical}
input[type=checkbox]{accent-color:var(--accent);width:auto}
.payment-box{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
/* Order confirmation (checkout success) */
.order-confirm-box{max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1.5rem;margin-bottom:1.3rem}
.order-confirm-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2em 1em;padding:.6rem 0;border-bottom:1px solid var(--border)}
.order-confirm-row:last-of-type{border-bottom:none}
.order-confirm-row .label{margin:0;color:var(--text-dim);font-size:.85rem;font-weight:600}
.order-confirm-row .value{font-weight:700;text-align:right}
.order-confirm-row .order-id{color:var(--accent-2);font-size:1.2rem;font-weight:800;letter-spacing:.3px}
.order-confirm-note{color:var(--text-dim);font-size:.85rem;margin:.9rem 0 0}
/* Wishlist / account */
.notice{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.92rem}
.notice.success{border-color:var(--ok);color:var(--ok)}
/* Footer */
footer.site{border-top:1px solid var(--border);margin-top:3rem;padding:2.6rem 0 1.6rem;background:var(--bg-alt);font-size:.88rem;color:var(--text-dim)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-grid h4{color:var(--text);font-size:.9rem}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:.5rem}
.footer-grid a{color:var(--text-dim)}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{text-align:center;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border);font-size:.8rem}
.social-row{display:flex;gap:.7rem;margin-top:.8rem;flex-wrap:wrap}
.social-row a{background:var(--surface);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);border:1px solid var(--border);transition:transform .15s ease,background .2s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.social-row a:hover{transform:translateY(-3px);text-decoration:none;border-color:transparent;box-shadow:var(--shadow)}
.social-row a.social-fb:hover{background:#1877F2;color:#fff}
.social-row a.social-ig:hover{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
.social-row a.social-tt:hover{background:#010101;color:#fff}
.social-row a.social-yt:hover{background:#FF0000;color:#fff}
/* Pagination */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:2rem}
.pagination a,.pagination span{padding:.5em .9em;border-radius:8px;border:1px solid var(--border);color:var(--text-dim);font-size:.85rem}
.pagination .current{background:var(--accent);color:#1a0a12;border-color:var(--accent);font-weight:700}
/* Filters bar */
.filters-bar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem;justify-content:space-between}
.filters-bar .result-count{color:var(--text-dim);font-size:.85rem;white-space:nowrap}
.filter-form{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.filter-group{min-width:150px}
.filter-group select{min-width:150px}
.price-range{display:flex;align-items:center;gap:.4rem;min-width:0}
.price-range input{width:110px;min-width:0;padding-left:.6em;padding-right:.4em}
.price-range-sep{color:var(--text-dim)}
.filter-check{
display:flex;align-items:center;gap:.4rem;margin:0;font-weight:500;font-size:.88rem;
color:var(--text);white-space:nowrap;cursor:pointer;
}
.btn-sm{padding:.55em 1.1em;font-size:.85rem}
.clear-filters{font-size:.85rem;color:var(--text-dim);text-decoration:underline;white-space:nowrap}
.clear-filters:hover{color:var(--accent)}
@media (max-width:700px){
.filters-bar{flex-direction:column;align-items:stretch}
.filter-form{flex-direction:column;align-items:stretch}
.filter-group,.filter-group select{min-width:0}
.price-range{width:100%}
.price-range input{flex:1;width:0}
.filters-bar .result-count{text-align:right}
}
.whatsapp-fab-wrap{position:fixed;bottom:20px;right:20px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.whatsapp-fab-label{
background:#fff;color:#111b21;font-size:.82rem;font-weight:700;
padding:.5em .95em;border-radius:999px;box-shadow:var(--shadow);
white-space:nowrap;position:relative;
animation:wa-label-in .5s ease .5s both;
}
.whatsapp-fab-label::after{
content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;
}
.whatsapp-fab{
position:relative;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;
width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 26px rgba(37,211,102,.5);
transition:transform .2s ease,box-shadow .2s ease;
}
.whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(37,211,102,.65);text-decoration:none}
.whatsapp-fab::before{
content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;
opacity:.55;z-index:-1;animation:wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes wa-label-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){
.whatsapp-fab-label{display:none}
.whatsapp-fab{width:52px;height:52px}
}
/* Tablet and phone: below this width the full category bar no longer has
room to lay out in one row (8 top-level items, two with dropdowns), so
it collapses behind the hamburger toggle instead of wrapping, clipping,
or forcing a horizontal scroll. The header-top row wraps too, letting
the search field drop to its own full-width line.
Threshold is 1180px (matches --maxw), not 1000px: at the current 17px
nav font-size the full row needs ~1120px of content width, which the
1180px container only clears once padding is added back — a narrower
cutoff left a real dead zone (~1000-1180px, e.g. a 1024px laptop) where
the row would overflow/clip instead of collapsing. If the nav font-size
or item count changes again, re-measure nav.scrollWidth vs the
container and adjust this number rather than assuming 1000px is safe. */
@media (max-width:1180px){
.header-top{flex-wrap:wrap}
.search-form{flex:1 1 100%;max-width:none;order:3;margin-top:.6rem}
.nav-row{border-top:none}
nav.main{
display:none;position:absolute;top:100%;left:0;right:0;
background:var(--bg-alt);flex-direction:column;align-items:stretch;
max-width:none;margin:0;padding:1rem 1.2rem;
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
gap:.1rem;overflow-x:visible;
}
nav.main.open{display:flex}
.nav-toggle{display:block}
/* Dropdowns become tap-to-expand nested lists — hover doesn't apply,
and there's no room for a floating overlay. */
.has-dropdown{flex-direction:column;align-items:stretch;width:100%}
.has-dropdown > a.top-link{border-radius:8px 8px 0 0}
.has-dropdown .dropdown-toggle{position:absolute;right:0;top:0;height:100%;border-radius:0 8px 0 0}
.has-dropdown.open .dropdown{display:block}
.dropdown{position:static;box-shadow:none;border:none;background:var(--surface-2);margin:0 0 .3rem;min-width:0}
}
/* Homepage promo banner (e.g. "New Arrivals" highlight) — a single
clickable image with an optional bold headline/CTA overlay, editable
from Settings > Homepage Promo Banner. */
.promo-banner{
position:relative;display:block;overflow:hidden;
border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);
background:var(--surface);
}
.promo-banner:hover{text-decoration:none;border-color:var(--accent)}
.promo-banner-img{width:100%;height:auto;display:block}
.promo-banner-overlay{
position:absolute;inset:0;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.35em;
padding:6% 6%;
background:linear-gradient(90deg,rgba(18,9,18,.72) 0%,rgba(18,9,18,.35) 45%,rgba(18,9,18,0) 75%);
}
.promo-banner-title{
font-size:clamp(1.4rem,4vw,2.6rem);font-weight:900;line-height:1.05;
color:#fff;-webkit-text-stroke:1.5px var(--accent);text-shadow:0 3px 0 var(--accent-dim),0 2px 12px rgba(0,0,0,.5);
text-transform:uppercase;letter-spacing:.02em;
}
.promo-banner-subtitle{
font-size:clamp(1rem,2.4vw,1.4rem);font-weight:800;color:var(--accent-2);
text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.promo-banner-btn{
margin-top:.5em;display:inline-flex;align-items:center;gap:.4em;
background:var(--accent);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);font-weight:800;font-size:clamp(.85rem,1.6vw,1.05rem);
padding:.65em 1.4em;border-radius:999px;box-shadow:0 6px 18px var(--accent-glow);
}
.promo-banner:hover .promo-banner-btn{background:var(--accent-2);color:#1a0a12;text-shadow:none}
@media (max-width:600px){
.promo-banner-overlay{
background:linear-gradient(180deg,rgba(18,9,18,.75) 0%,rgba(18,9,18,.4) 55%,rgba(18,9,18,.05) 100%);
padding:5% 6%;
}
}
/* Homepage "Sex Toy Videos" teaser — a single clickable image, editable
from Settings > Homepage Videos Section. Same shape as .promo-banner. */
.video-teaser{
position:relative;display:block;overflow:hidden;
border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);
background:var(--surface);
}
.video-teaser:hover{text-decoration:none;border-color:var(--accent)}
.video-teaser img{width:100%;height:auto;display:block}