/* =============================================================================
WMD CATEGORY TEMPLATE — category-only CSS.
Loaded IN ADDITION to wmd-collection-template/wmd-collection.css, which owns the
shared listing design (grid, sidebar, cards, pager, footer). Keep this file for
things that exist ONLY on product_cat archives.
TABS (Active / Discontinued reference-price tables inside category_content):
these rules are PORTED from porto_settings['css-code']. Porto serves that custom
CSS from /wp-content/uploads/porto_styles/, a path this template's asset kill-list
strips — so without this copy the tables render unstyled (verified: .tab-container
fell back to max-width:none, padding:0, .tabs display:block instead of flex).
The matching click handler comes from porto_settings['js-code'], which prints
INLINE and therefore still survives — only the CSS needed porting.
If the tab design is ever changed in Porto Theme Options, mirror it here.
============================================================================= */
/* Tab container */
.tab-container {
max-width: 1000px;
margin: 50px auto;
padding: 20px;
}
/* Tabs style */
.tabs {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
border-radius: 5px 5px 0 0;
padding: 10px;
cursor: pointer;
}
.tab {
flex: 1;
text-align: center;
padding: 10px;
background-color: #ddd;
border: 1px solid #ccc;
border-bottom: none;
transition: background-color 0.3s ease;
}
.tab:hover {
background-color: #bbb;
}
/* Active tab */
.tab.active {
background-color: #fff;
font-weight: bold;
border-top: 3px solid #007bff;
}
/* Content area */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
background-color: #fff;
}
/* Show active content */
.tab-content.active {
display: block;
}
/* Responsive styling */
@media (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tab {
margin-bottom: 5px;
}
.tab-content {
padding: 10px;
}
}
/* ---------------------------------------------------------------------------
Child-category navigation ([subcategory_filter], Porto rendered it as a sidebar
block widget above the filter widgets).
Placement is EXPLICIT rather than relying on grid auto-flow: .shop is a
280px/1fr grid, so a third child would land in the next free cell and shove the
filter form into the product column. Pinning rows keeps .side a DIRECT child of
.shop, which matters because the mobile bottom-sheet CSS targets .side itself.
--------------------------------------------------------------------------- */
.catnav{grid-column:1;grid-row:1}
.shop > .side{grid-column:1;grid-row:2}
.shop > .shop-main{grid-column:2;grid-row:1 / span 2}
.catnav .subcategory-filter,.catnav .wmd-subcategory-filter{background:#fff;border:1px solid var(--c-line);border-radius:4px;padding:16px 20px}
.catnav h2,.catnav h3,.catnav h4,.catnav .wmd-filter-title{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 12px;font-weight:600}
.catnav ul{list-style:none;margin:0;padding:0}
.catnav li{margin:0}
.catnav a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;text-decoration:none;transition:color .15s}
.catnav a:hover{color:var(--gold)}
/* The widget ships its OWN inline stylesheet containing
@media(max-width:991px){ .wmd-filter-header.mobile-only{display:flex!important} }
which loads after ours and has the same specificity, so a plain
`.catnav .wmd-filter-header{display:none!important}` LOST the tie on source order
and the stray "FILTERS ×" bar kept showing on phones. Match its compound selector
(one class more specific) to win. The under it goes too. */
.catnav .wmd-filter-header.mobile-only{display:none!important}
.catnav hr.mobile-only{display:none!important}
/* ---- collapsible on mobile ----------------------------------------------
Desktop keeps the list open: the nav sits in the sidebar column, so it costs
nothing above the grid. On phones everything stacks, and categories with 60+
children pushed the products far below the fold — so the heading becomes a
toggle and the list starts closed. */
.catnav h5,.catnav .catnav-toggle{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0 0 12px}
@media(max-width:980px){
body.wmd-category .catnav h5,body.wmd-category .catnav .catnav-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:2px 0;cursor:pointer;user-select:none}
body.wmd-category .catnav h5::after,body.wmd-category .catnav .catnav-toggle::after{content:'';flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transform-origin:center;transition:transform .2s}
body.wmd-category .catnav.open h5::after,body.wmd-category .catnav.open .catnav-toggle::after{transform:rotate(-135deg)}
body.wmd-category .catnav ul{display:none;margin-top:12px}
body.wmd-category .catnav.open ul{display:block}
}
@media(max-width:980px){
/* single column: let everything flow normally again */
.catnav,.shop > .side,.shop > .shop-main{grid-column:auto;grid-row:auto}
}
/* ---------------------------------------------------------------------------
CONTENT LAYOUT CLASSES used inside the category copy (term description /
category_content). Also ported from porto_settings['css-code'] for the same
reason as the tabs above: Porto serves that CSS from /uploads/porto_styles/,
which this template's kill-list strips.
Without these the two- and four-up card rows in the copy lose their flex
layout and collapse into full-width stacked blocks — that was the "content
styles are gone" report (the Submariner copy grew to ~8,600px tall and its
1000px images rendered at full size).
Derived by intersecting the css-code selectors with the classes actually
present in the copy, so this is the complete set, not a guess: the copy uses
only flex-container/flex-container2/flex-item2/flex-item4 plus the tab
classes above and WP core's .alignnone.
--------------------------------------------------------------------------- */
.cbottom .flex-container,
.cbottom .flex-container2,
.cintro-copy .flex-container,
.cintro-copy .flex-container2{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:20px}
.cbottom .flex-item2,
.cintro-copy .flex-item2{background-color:#f0f0f0;padding:20px;border:1px solid #ddd;flex:1 1 48%;text-align:center}
.cbottom .flex-item2 ol li,
.cintro-copy .flex-item2 ol li{text-align:left}
.cbottom .flex-item4,
.cintro-copy .flex-item4{background-color:#f0f0f0;padding:20px;border:1px solid #ddd;flex:1 1 22%;text-align:center}
@media(max-width:1024px){
.cbottom .flex-item4,.cintro-copy .flex-item4{flex:1 1 45%}
}
@media(max-width:480px){
.cbottom .flex-item2,.cintro-copy .flex-item2,
.cbottom .flex-item4,.cintro-copy .flex-item4{flex:1 1 100%}
}
/* Copy images.
1) Keep them inside the column — Porto's wrapper constrained these; without it a
1000px asset overflows the text measure.
2) display:inline-block is LOAD-BEARING, not cosmetic. The shared stylesheet has a
global `img{display:block}` reset, and a block image ignores the
`text-align:center` the copy relies on — so the icons in the .flex-item2 /
.flex-item4 cards rendered flush left instead of centred under their headings
(Porto left images inline, which is what the copy was authored against).
3) carries a 1em/40px UA margin that would indent those icons; zero it so
the centring is the parent's text-align, nothing else. */
.cbottom img,.cintro-copy img{display:inline-block;max-width:100%;height:auto}
.cbottom figure,.cintro-copy figure{margin:0 0 12px}
/* Row sizing for the 2-row sidebar column.
.shop-main spans rows 1-2, so with implicit (auto) rows the grid distributes its
full height across BOTH rows — inflating row 1 and dropping the filter form ~250px
below the child-category nav. Pinning row 1 to its content and giving row 2 the
remainder closes that gap. Scoped to body.wmd-category so the shared
wmd-collection.css (collections have no .catnav) is untouched. */
/* .shop sets gap:40px, which is BOTH column- and row-gap, so the sidebar column
inherited a 40px vertical gap on top of any margin — that plus an 18px margin on
.catnav was the 58px white band between the child-category nav and the filters.
Keep the 40px COLUMN gutter, tighten only the row gap. */
body.wmd-category .shop{grid-template-rows:auto 1fr;row-gap:24px}
body.wmd-category .shop > .side{align-self:start}
@media(max-width:980px){
body.wmd-category .shop{grid-template-rows:none}
}
/* ---------------------------------------------------------------------------
Remaining copy classes, ported from porto_settings['css-code'].
Found by a SITE-WIDE intersection: every product_cat description +
category_content + product_schema_for_categories (1.4 MB of copy across all 545
terms) vs every selector in css-code. The first pass only looked at ONE term
(Submariner), which is why `.flex-item` was missed — Submariner uses
.flex-item2/.flex-item4, but 27 categories (Audemars Piguet among them) use bare
`.flex-item` (flex:1 1 30%, i.e. 3-up), and without it those cards lost their
grey panel, border, radius and centring.
Usage across the catalogue: flex-item2 355, flex-item4 307, flex-container 198,
flex-item 27, comparison 7, toggle-button 1.
NOT ported: .container-tech-info (0 uses on categories — it is a product-TAG
layout) and .owl-carousel/.custom-slider/.panel-overlay (their plugin is stripped
here, so CSS alone would not revive them).
NB the media-query overrides below must STAY inside their @media blocks. An
earlier extractor matched rules nested in @media as if they were top-level and
emitted `flex:1 1 100%` unconditionally, which stacked the cards full-width at
every viewport.
--------------------------------------------------------------------------- */
.cbottom .flex-item,.cintro-copy .flex-item{background-color: #f0f0f0; padding: 20px; border: 1px solid #ddd; flex: 1 1 30%; text-align: center; border-radius: 5px;}
.cbottom .toggle-button,.cintro-copy .toggle-button{display: inline; margin-top: -5px; background-color: white; color: #949494; border: solid 1px #949494; padding: 5px 8px; cursor: pointer; font-size: 14px; border-radius: 3px;}
.cbottom .comparison,.cintro-copy .comparison{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 60px;}
.cbottom .comparison-col,.cintro-copy .comparison-col{flex: 0 0 48%; background-color: white; border-radius: 8px; padding: 30px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.cbottom .comparison-col h3,.cintro-copy .comparison-col h3{color: var(--primary); margin-bottom: 20px; text-align: center; font-size: 24px;}
.cbottom .comparison-list,.cintro-copy .comparison-list{list-style: none; padding: 0; margin: 0;}
.cbottom .comparison-list li,.cintro-copy .comparison-list li{padding: 10px 0; border-bottom: 1px solid #eee; display: flex; align-items: center;}
.cbottom .comparison-list li::before,.cintro-copy .comparison-list li::before{content: '\2713'; color: var(--accent); margin-right: 10px; font-weight: bold;}
@media (max-width: 480px){
.cbottom .flex-item,.cintro-copy .flex-item{flex: 1 1 100%;}
}
@media (max-width: 767px){
.cbottom .comparison,.cintro-copy .comparison{flex-direction: column;}
.cbottom .comparison-col,.cintro-copy .comparison-col{flex: 0 0 100%;}
}
@media (max-width: 768px){
.cbottom .flex-item,.cintro-copy .flex-item{flex: 1 1 45%;}
}