/** * Art of Socks — Product Page Enhancements * * Every selector below starts with .aos-pp-on, a class added to on * single product pages only. Nothing here can affect the shop, cart or * checkout. Deactivating the plugin removes the class and all of these rules. */ .aos-pp-on { --aos-brand: #99332F; --aos-brand-hover: #7E2A26; --aos-brand-soft: #F7EDEC; --aos-ink: #1E293B; --aos-ink-2: #4A5568; --aos-ink-3: #82806F; --aos-line: #E4DED5; --aos-line-strong: #CFC6B9; --aos-brass: #A9884E; --aos-good: #3D6B4F; --aos-surface: #ffffff; } /* ------------------------------------------------------------------ 1. Gallery width Classic WooCommerce layouts only. If your product page is built with Elementor containers, set the column widths in Elementor instead — see the README. ------------------------------------------------------------------ */ @media (min-width: 992px) { .aos-pp-wide .woocommerce div.product div.images.woocommerce-product-gallery { width: 57%; } .aos-pp-wide .woocommerce div.product div.summary { width: 39%; } } .aos-pp-on .woocommerce-product-gallery__image img { border-radius: 4px; } .aos-pp-on .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-left: 0; } .aos-pp-on .flex-control-thumbs li { list-style: none; margin: 0; width: auto; flex: 0 0 auto; } .aos-pp-on .flex-control-thumbs img { border: 1px solid var(--aos-line); border-radius: 3px; opacity: 1; transition: border-color .15s ease, transform .15s ease; } .aos-pp-on .flex-control-thumbs img:hover { transform: translateY(-1px); border-color: var(--aos-line-strong); } .aos-pp-on .flex-control-thumbs img.flex-active { border-color: var(--aos-brand); box-shadow: 0 0 0 1px var(--aos-brand); } /* Phones and tablets: the thumbnail rail, as a grid. Above 992px the rail is lifted out beside the main image by the custom CSS on the gallery widget in Elementor. Below that it falls back under the image, where the slider lays it out as a wrapping row of natural-size images — so a vertical tarot thumbnail stands taller than the horizontal mock-ups beside it and every row comes out ragged. A fixed grid of squares fixes the alignment, and object-fit: contain on a mat keeps the whole artwork visible rather than cropping or squashing it, the same treatment the archive tiles use. 991px is not a guess: it is one below the min-width on the Elementor rule, so the two can never both apply. ------------------------------------------------------------------ */ @media (max-width: 991px) { .aos-pp-on .flex-control-thumbs { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin: 12px 0 0 !important; padding: 0 !important; list-style: none !important; } /* the slider writes pixel widths and floats onto these inline */ .aos-pp-on .flex-control-thumbs li { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; flex: none !important; list-style: none !important; } .aos-pp-on .flex-control-thumbs li img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: contain !important; padding: 5px !important; background: var(--aos-surface-2, #FAF8F6) !important; border: 1px solid var(--aos-line, #E4DED5) !important; border-radius: 4px !important; box-sizing: border-box !important; opacity: 1 !important; } } /* Three across on a phone, so each thumbnail stays big enough to read. */ @media (max-width: 600px) { .aos-pp-on .flex-control-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; } } /* Desktop rail: the slider gives each thumbnail a fixed square box, and object-fit defaults to `fill`, which stretches a 600x819 vertical artwork into that square. Nothing sets `fill` anywhere — it is simply the initial value showing through. `contain` on a mat shows the whole artwork at its own proportions, matching the phone and tablet rail and the archive tiles. */ @media (min-width: 992px) { .aos-pp-on .flex-control-thumbs li img { object-fit: contain !important; padding: 3px; background: var(--aos-surface-2, #FAF8F6); box-sizing: border-box; } } /* ------------------------------------------------------------------ 1b. Section menu ("The artwork / Which size / …") Styles the Elementor Mega Menu widget to match the plain list of links it replaces: 14px, weight 600, 26px apart, no underline, no dropdown arrow, on the page's own band rather than a menu bar. Every selector here is scoped to .elementor-location-single. A product page carries TWO mega menus — this one and the site header's — and .aos-pp-on alone reaches both. Unscoped, these rules stripped the background off the header's mobile drawer, which then showed the page through it, and flattened its item padding. Header menus live in .elementor-location-header, so the location class separates them with nothing for anyone to configure. ------------------------------------------------------------------ */ .aos-pp-on .elementor-location-single .e-n-menu { background: none; border: 0; } .aos-pp-on .elementor-location-single ul.e-n-menu-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; background: none; border: 0; } .aos-pp-on .elementor-location-single li.e-n-menu-item { margin: 0; padding: 0; list-style: none; background: none; border: 0; } .aos-pp-on .elementor-location-single .e-n-menu-title { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } .aos-pp-on .elementor-location-single a.e-n-menu-title-container, .aos-pp-on .elementor-location-single .e-n-menu-title-container { display: inline-flex; align-items: center; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--aos-ink-2, #4A5568); transition: color .15s ease; } .aos-pp-on .elementor-location-single .e-n-menu-title-text { font: inherit; color: inherit; } .aos-pp-on .elementor-location-single a.e-n-menu-title-container:hover, .aos-pp-on .elementor-location-single a.e-n-menu-title-container:hover .e-n-menu-title-text, .aos-pp-on .elementor-location-single a.e-n-menu-title-container:focus-visible { color: var(--aos-brand, #99332F); } /* The widget marks the section you are currently scrolled to with .e-current and paints it Elementor's default link blue, which is off-brand and has no equivalent in the list of links this replaces. Matched to the rest. For a current-section highlight instead — the one thing the Mega Menu can do that a Text Editor cannot — change this colour to var(--aos-brand). */ .aos-pp-on .elementor-location-single .e-n-menu-title.e-current a.e-n-menu-title-container, .aos-pp-on .elementor-location-single .e-n-menu-title.e-current .e-n-menu-title-text { color: var(--aos-ink-2, #4A5568); } /* These items scroll to an anchor; none of them opens a dropdown, so the arrow the widget draws points at nothing. */ .aos-pp-on .elementor-location-single .e-n-menu-dropdown-icon, .aos-pp-on .elementor-location-single .e-n-menu-title-container > .e-n-menu-icon:empty { display: none !important; } /* ------------------------------------------------------------------ 1c. The Reviews entry, on a product with no reviews Same rule as the reviews section itself: it disappears until the first approved review arrives, then comes back on its own. Matches the Mega Menu and a plain list of links alike. ------------------------------------------------------------------ */ .aos-pp-on.aos-no-reviews .elementor-location-single li.e-n-menu-item:has( a[href*="#reviews"] ), .aos-pp-on.aos-no-reviews .elementor-location-single li:has( > a[href*="#reviews"] ) { display: none !important; } /* set by the JS on a browser without :has() */ .aos-pp-on.aos-no-reviews .aos-reviews-link { display: none !important; } /* ------------------------------------------------------------------ 2. Size cards (built by the JS from your existing dropdown) ------------------------------------------------------------------ */ /* The original dropdown stays in the page — it is still the field WooCommerce reads and submits, it is only hidden from view once the cards have successfully replaced it. The .aos-has-cards class is added last, so if the JS fails at any point the normal dropdown is shown. */ .aos-pp-on .aos-has-cards .variations { display: none; } .aos-pp-on .aos-sizes-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .aos-pp-on .aos-sizes-label .aos-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aos-ink-3); } .aos-pp-on .aos-sizes-label .aos-v { font-size: 13.5px; font-weight: 600; color: var(--aos-ink-2); } .aos-pp-on .aos-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; } .aos-pp-on .aos-size { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--aos-surface); border: 1px solid var(--aos-line); border-radius: 4px; padding: 13px 12px 14px; cursor: pointer; font: inherit; line-height: 1.35; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .aos-pp-on .aos-size:hover { border-color: var(--aos-line-strong); } .aos-pp-on .aos-size:focus-visible { outline: 2px solid var(--aos-brand); outline-offset: 2px; } .aos-pp-on .aos-size[aria-pressed="true"] { border-color: var(--aos-brand); box-shadow: inset 0 0 0 1px var(--aos-brand); background: var(--aos-brand-soft); } .aos-pp-on .aos-size-pc { font-size: 17px; font-weight: 800; color: var(--aos-ink); font-variant-numeric: tabular-nums; } .aos-pp-on .aos-size-dim, .aos-pp-on .aos-size-time { font-size: 12.5px; color: var(--aos-ink-3); font-variant-numeric: tabular-nums; } .aos-pp-on .aos-size-price { margin-top: 5px; font-size: 14px; font-weight: 700; color: var(--aos-ink); } .aos-pp-on .aos-size-price del, .aos-pp-on .aos-size-price .screen-reader-text, .aos-pp-on .aos-sticky-price del, .aos-pp-on .aos-sticky-price .screen-reader-text { display: none !important; } .aos-pp-on .aos-size-price ins { text-decoration: none; } .aos-pp-on .aos-size-flag { margin-top: 6px; min-height: 13px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aos-brass); } /* Comparison table row matching the chosen size */ .aos-pp-on tr.aos-row-on > * { background: var(--aos-brand-soft) !important; } .aos-pp-on tr.aos-row-on > *:first-child { color: var(--aos-brand) !important; font-weight: 700 !important; box-shadow: inset 3px 0 0 var(--aos-brand); } /* Fact strip under the cards */ .aos-pp-on .aos-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--aos-line); border: 1px solid var(--aos-line); border-radius: 4px; overflow: hidden; margin: 0 0 18px; } .aos-pp-on .aos-fact { background: var(--aos-surface); padding: 10px 12px; } .aos-pp-on .aos-fact-k { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--aos-ink-3); } .aos-pp-on .aos-fact-v { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--aos-ink); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ 3. Add to cart ------------------------------------------------------------------ */ .aos-pp-on .single_add_to_cart_button { width: 100%; padding: 16px 20px; font-size: 16.5px; font-weight: 700; letter-spacing: .02em; border-radius: 3px; transition: background .15s ease, transform .1s ease; } .aos-pp-on .single_add_to_cart_button:active { transform: translateY(1px); } .aos-pp-on .price { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ 3b. Estimated delivery ------------------------------------------------------------------ */ .aos-pp-on .aos-delivery { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; font-size: 13.5px; line-height: 1.4; text-align: center; color: var(--aos-ink-2); } .aos-pp-on .aos-delivery .aos-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aos-good); } /* ------------------------------------------------------------------ 4. Trust row ------------------------------------------------------------------ */ .aos-pp-on .aos-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--aos-line); } .aos-pp-on .aos-trust-item { font-size: 12.5px; line-height: 1.45; color: var(--aos-ink-2); } .aos-pp-on .aos-trust-icon { display: block; font-size: 15px; line-height: 1; margin-bottom: 8px; color: var(--aos-brass); } .aos-pp-on .aos-trust-icon svg { display: block; width: 21px; height: 21px; } .aos-pp-on .aos-trust-title { display: block; font-size: 13px; font-weight: 700; color: var(--aos-ink); margin-bottom: 2px; } /* ------------------------------------------------------------------ 4b. Empty reviews section The body carries .aos-no-reviews on products with no approved reviews. Add the class aos-reviews-section to the section in Elementor (Advanced -> CSS Classes) and it hides itself until the first one lands. ------------------------------------------------------------------ */ .aos-pp-on.aos-no-reviews .aos-reviews-section { display: none !important; } /* The class sits on the Elementor column. Hiding only that leaves the section around it — 56px of padding and a rule top and bottom — as a stray empty band. This takes the section with it. Matched through the column, deliberately: the same class may also mark the Reviews entry in the section menu, and an can never be a direct child of .elementor-container, so that one can never drag its section down with it. .aos-reviews-hidden is the fallback the JS sets on a browser without :has(). */ .aos-pp-on.aos-no-reviews .elementor-section:has( > .elementor-container > .elementor-column.aos-reviews-section ), .aos-pp-on.aos-no-reviews .e-con:has( > .e-con.aos-reviews-section ), .aos-pp-on.aos-no-reviews .aos-reviews-hidden { display: none !important; } /* ------------------------------------------------------------------ 5. Sticky Add to Cart bar ------------------------------------------------------------------ */ .aos-pp-on .aos-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: var(--aos-surface); border-top: 1px solid var(--aos-line); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .5); transform: translateY(102%); transition: transform .28s ease; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .aos-pp-on .aos-sticky.is-visible { transform: translateY(0); } .aos-pp-on .aos-sticky-inner { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; } .aos-pp-on .aos-sticky img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--aos-line); flex: none; } .aos-pp-on .aos-sticky-text { flex: 1; min-width: 0; } .aos-pp-on .aos-sticky-title { font-size: 13.5px; font-weight: 700; color: var(--aos-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aos-pp-on .aos-sticky-sub { font-size: 12.5px; color: var(--aos-ink-3); } .aos-pp-on .aos-sticky-price { font-size: 18px; font-weight: 800; color: var(--aos-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .aos-pp-on .aos-sticky-price del { display: none; } .aos-pp-on .aos-sticky-price ins { text-decoration: none; } .aos-pp-on .aos-sticky-btn { background: var(--aos-brand); color: #fff; border: 0; border-radius: 3px; padding: 13px 24px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; } .aos-pp-on .aos-sticky-btn:hover { background: var(--aos-brand-hover); } .aos-pp-on .aos-sticky-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Hide the bar on desktop when the sticky_desktop option is off. */ @media (min-width: 992px) { .aos-pp-sticky-mobile .aos-sticky { display: none; } } /* ------------------------------------------------------------------ 6. Small cleanups ------------------------------------------------------------------ */ .aos-pp-on .aos-sku-hidden { display: none; } @media (max-width: 640px) { .aos-pp-on .aos-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .aos-pp-on .aos-size { padding: 10px 9px 11px; } .aos-pp-on .aos-size-pc { font-size: 15px; } .aos-pp-on .aos-size-dim, .aos-pp-on .aos-size-time { font-size: 11.5px; } .aos-pp-on .aos-size-flag { font-size: 9px; letter-spacing: .05em; margin-top: 5px; } .aos-pp-on .aos-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aos-pp-on .aos-fact { padding: 9px 8px; } .aos-pp-on .aos-fact-v { font-size: 13.5px; } /* Three across on one line rather than three stacked rows. The descriptions go: at this width they wrap to two lines each and push the price and the cart button off the first screen, and the headings already carry the point. */ .aos-pp-on .aos-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 14px; margin-top: 16px; } .aos-pp-on .aos-trust-item { text-align: center; } .aos-pp-on .aos-trust-icon { margin: 0 auto 6px; } .aos-pp-on .aos-trust-icon svg { margin: 0 auto; } .aos-pp-on .aos-trust-title { font-size: 12px; line-height: 1.3; margin-bottom: 0; } .aos-pp-on .aos-trust-text { display: none; } .aos-pp-on .aos-sticky-text, .aos-pp-on .aos-sticky img { display: none; } .aos-pp-on .aos-sticky-btn { flex: 1; } .aos-pp-on .aos-sticky-inner { gap: 12px; } } @media (prefers-reduced-motion: reduce) { .aos-pp-on .aos-sticky, .aos-pp-on .aos-size, .aos-pp-on .flex-control-thumbs img { transition: none; } } /* ================================================================== 6. Category / shop archive Scoped to .aos-arch, added to on shop and product-category pages only. Artwork is shown whole on a mat, never cropped, so horizontal and vertical puzzles share one grid without either being cut. --aos-tile is set inline by the plugin. ================================================================== */ .aos-arch { --aos-tile: 300px; /* shared with the filter chips, so the sort control matches them even when it is printed outside the filter widget by [aos_sortbar] */ --aos-chip-radius: 6px; --aos-control-h: 32px; --aos-brand: #99332F; --aos-brand-soft: #F7EDEC; --aos-ink: #1E293B; --aos-ink-2: #4A5568; --aos-ink-3: #82806F; --aos-line: #E4DED5; --aos-brass: #A9884E; --aos-surface: #ffffff; --aos-surface-2: #F3EFEA; } /* the tile: fixed height, artwork centred on a mat */ .aos-arch ul.products li.product a img, .aos-arch .products .product a img { height: var(--aos-tile); width: 100%; max-width: 100%; object-fit: contain; margin: 0 0 12px; padding: 16px; background: var(--aos-surface-2); border: 1px solid var(--aos-line); border-radius: 4px; box-sizing: border-box; transition: box-shadow .2s ease, transform .2s ease; } .aos-arch ul.products li.product:hover a img { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(30, 25, 20, .08), 0 24px 44px -22px rgba(30, 25, 20, .5); } /* the repeated category name above each title */ .aos-arch ul.products li.product .woocommerce-loop-category__title, .aos-arch ul.products li.product .posted_in, .aos-arch ul.products li.product .product__categories, .aos-arch ul.products li.product .astra-shop-summary-wrap > span:first-child { display: none; } /* the replacement: orientation and how many sizes */ .aos-arch .aos-loop-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aos-brass); margin-bottom: 4px; } .aos-arch ul.products li.product .woocommerce-loop-product__title { font-size: 16.5px; font-weight: 700; line-height: 1.32; color: var(--aos-ink); padding: 0; margin: 0 0 6px; } .aos-arch .aos-loop-price, .aos-arch ul.products li.product .price { display: block; font-size: 14.5px; font-weight: 700; color: var(--aos-ink); font-variant-numeric: tabular-nums; margin: 0; } .aos-arch .aos-loop-price del, .aos-arch .aos-loop-price .screen-reader-text { display: none !important; } .aos-arch .aos-loop-price ins { text-decoration: none; } /* the description, once moved below the grid */ .aos-arch .aos-arch-description { max-width: 66ch; margin: 44px auto 0; padding-top: 34px; border-top: 1px solid var(--aos-line); color: var(--aos-ink-2); font-size: 16.5px; line-height: 1.68; } .aos-arch .aos-arch-description > *:first-child { margin-top: 0; } /* subcategory tiles, once the Customizer is set to show them */ .aos-arch ul.products li.product-category .woocommerce-loop-category__title { font-size: 15px; font-weight: 700; color: var(--aos-ink); display: block !important; } .aos-arch ul.products li.product-category .woocommerce-loop-category__title mark { background: none; color: var(--aos-ink-3); font-weight: 400; } @media (max-width: 640px) { .aos-arch ul.products li.product a img, .aos-arch .products .product a img { height: 210px; max-height: 210px; padding: 10px; } .aos-arch ul.products li.product .woocommerce-loop-product__title { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .aos-arch ul.products li.product a img, .aos-arch ul.products li.product:hover a img { transition: none; transform: none; } } /* ------------------------------------------------------------------ 7. Filter Everything widget, styled as the chip row Class names read from the live markup on artofsocks.shop, not guessed. Written against the filter's "Labels" layout, which nests an extra .wpc-filter-label-wrapper inside each