@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");

/* ==========================================================================
   shop.css — all hand-authored storefront CSS, in one file
   ==========================================================================

   Merged from 8 files so storefront design lives in one place. Section order
   below IS the old stylesheet load order and is load-bearing: rules of equal
   specificity resolve by position, so moving a block can silently flip which
   one wins. Append new sections at the end; do not reorder.

     1. Base overrides ......... was template/eshop/css/custom.css
     2. Navbar ................. was project/css/shop-navbar.css
     3. Hero ................... was project/css/shop-hero.css
     4. Sections ............... was project/css/shop-sections.css
     5. Product grid ........... was project/css/shop-grid.css
     6. Product details (PDP) .. was project/css/shop-pdp.css
     7. Footer ................. was project/css/shop-footer.css
     8. Chat widget ............ was project/css/shop-chat-widget.css
     9. Cart ................... shop/cart/index
    10. Checkout .............. shop/checkout/index
    11. Order confirmed ....... shop/checkout/order-confirmed
    12. Shop-by page banner ... shop/shop-by/partials/hero-banner
    13. Customize page ........ shop/shop-by/shop-by-customize
    14. Dialogs ............... shared: cart, checkout, and #msgModal

   Sections 1-8 name the stylesheet they were merged from; 9 onward were written
   here directly and name the page they style.

   NOT merged, deliberately: the eshop template's vendor CSS (style.css,
   responsive.css, magnific-popup, fancybox, themify-icons, font-awesome,
   slicknav, niceselect, animate, flex-slider, reset) stays in template/eshop/.
   It is purchased-theme code being progressively replaced, and
   font-awesome/themify/reset carry relative url() paths to ../fonts and
   ../images that only resolve from their current directory.

   Owl Carousel's CSS and JS are still on disk there but are no longer LOADED —
   the home hero is Swiper 11 (self-hosted in project/vendor/swiper) and nothing
   else on the storefront used Owl. See layouts/shop/includes/js.blade.php.

   Font sizes are NOT defined here — the .f-14 … .f-36 scale lives in
   project.css and is available on every page.
   ========================================================================== */



/* ==========================================================================
   1. Base overrides
   was: template/eshop/css/custom.css
   ========================================================================== */


:root {
    --artemis-red: #ff325a;
}


body, .form-control, .btn, table, tr, th, td, thead, tbody, .dropdown-menu, .skin-blue-light .sidebar-menu > li > a, .skin-blue .sidebar-menu > li > a {
    font-family: "Manrope", "Inter", "Karla", "Roboto", "Arial", sans-serif; /*'Open Sans',*/
!important;
    color: #333;
    font-weight: normal;
    font-size: 13px;
}


@media (min-width: 1400px) {
    .container {
        width: 1360px;
    }
}

@media (min-width: 1600px) {
    .container {
        width: 1560px;
    }
}


.navbar-nav {
    width: 100%;
}

img {
    width: 100%;
    height: auto;
}

.btn {
    font-family: "Manrope", "Inter", "Karla", "Roboto", "Arial", sans-serif;
!important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .content-header h2, .content-header h4, .page-title {
    font-family: "Manrope", "Inter", "Karla", "Roboto", "Arial", sans-serif;
!important;
    text-transform: none;

}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Manrope", "Inter", "Karla", "Roboto", "Arial", sans-serif;
!important;
    line-height: 1.2em;
}

.h1, h1 {
    font-size: 24px;
}

.h2, h2 {
    font-size: 22px;
}

.h3, h3 {
    font-size: 18px;
    padding: 15px 0;
}

.h4, h4 {
    font-size: 16px;
}

.h5, h5 {
    font-size: 14px;
}

h2.underlined {
    border-bottom: 2px solid lightgray;
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    float: left;
}

a, a:hover, a:focus, a:active, a:visited {
    color: var(--artemis-red);
!important;
}

label {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.container {
    max-width: 90%;
}

.page {
    max-width: 1170px;
    min-height: 570px;
    margin-bottom: 30px;
}

.page-title {
    margin: 20px 0 10px 0;
}

/*Fro main frame*/

.no-padding-r {
    padding-right: 0;
}

.no-padding-l {
    padding-left: 0;
}

.no-padding-t {
    padding-top: 0;
}

.no-padding-b {
    padding-bottom: 0;
}

.no-margin-r {
    margin-right: 0;
}

.no-margin-l {
    margin-left: 0;
}

.no-margin-t {
    margin-top: 0;
}

.no-margin-b {
    margin-bottom: 0;
}

/**************************
 * Font sizes
 *************************/
/* REMOVED — this was a second, byte-identical copy of the .f-8 … .f-48 block that
 * also lived in mainframe.css. Both are gone; the scale now lives once, in
 * project.css, with responsive steps.
 *
 * It mattered: this copy sat in custom.css, which loads AFTER project.css, so the
 * flat sizes here silently beat the responsive ones — .f-18 would have been pinned
 * at 18px on every screen while .f-22 (not in this copy) scaled normally. Do not
 * reintroduce a font-size scale in this file.
 */

/*manage border*/
.select2-drop, .select2-drop.select2-drop-above,
.select2-container.select2-drop-above .select2-choice,
.select2-container .select2-choice .select2-arrow,
.select2-container-multi .select2-choices .select2-search-choice,
.select2-container .select2-choice,
.form-control, button, .btn, .btnn {
    border-radius: 3px;
!important;
}

.navbar {
    margin-bottom: 0;
}


.header.shop .nav li {
    float: left;
}

.header.shop .nav li a {
    padding: 20px 8px;

}

.header.shop .nav li a:focus {
    background-color: inherit
}

.header.shop .search-bar input {
    width: 475px;
}

.content {
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    background-color: transparent;
!important;
}

.menu-area, .menu-area nav {
    height: 100%;
}

div.logo {
    width: 150px;
    height: auto;
}

/** Orange flare text */
.header.shop .top-left .list-main li i,
.header.shop .list-main li i,
.hero-slider .hero-text h1 {
    color: var(--artemis-red);
}

/** Orange flare background */
.header.shop .nav li.active a,
.header.shop .header-inner,
.header.shop .right-bar .sinlge-bar .single-icon .total-count {
    background-color: var(--artemis-red);
}

.header.sticky .header-inner .nav li a {
    color: white;
}

.header.shop .nav li .dropdown li a:hover,
.header.sticky .header-inner .nav li.active a,
.header.sticky .header-inner .nav li .dropdown li a:hover{
    color: #333;
}

.hero-slider .single-slider {
    height: 440px;
}

.hero-slider .hero-text h1 span {
    /*float: left;*/
    /*background-color: #222222;*/
    /*color: white;*/
    padding: 5px;
    font-size: inherit;
}

.hero-slider .hero-text .btn {
    background-color: var(--artemis-red);
}

.hero-slider .hero-text .btn:hover {
    background-color: #333;
}

.hero-slider .hero-text {
    margin-top: 50px;

}

.header.shop .logo {
    margin: 10px 0 0;
}

.header.shop .nav li .new {
    background-color: black
}

.header.shop .search-bar .btnn {
    background-color: black
}

.header.shop .search-bar .btnn:hover {
    background-color: var(--artemis-red)
}

.btn-danger {
    color: white;
}

.btn-artemis-red {
    background-color: var(--artemis-red);
    color: white;
    z-index: inherit;
}

.btn-bordered-artemis-red {
    border: 2px var(--artemis-red) solid;
    background-color: white;
    color: var(--artemis-red);
}

.btn-bordered-artemis-red:hover {
    background-color: var(--artemis-red);
    color: white;
}

select.form-control:not([size]):not([multiple]) {
    height: auto;
}

.form-control {
    font-size: inherit;
    min-height: 36px;
}

/*
| One border for every field on the storefront.
|
| The eshop template's reset.css (line ~714) gives `1px solid #ccc` to a list that
| spells the text inputs out as `input[type="text"]` etc — (0,1,1), which BEATS
| `.form-control` — but names the textarea as a bare element, (0,0,1), which LOSES
| to it. `select` is in the same position. So text inputs rendered #ccc while
| textareas and selects fell through to Bootstrap's lighter #dee2e6, and the two
| sat side by side on the checkout form looking like a rendering fault.
|
| Targets just the losers (textarea, select), lifting them to the #ccc the text
| inputs already render, so no input changes appearance. `textarea.form-control` is
| (0,1,1) and beats `.form-control`.
|
| Unscoped because this FILE is the scope: shop.css is loaded only by the shop
| layout, so it reaches every storefront form -- including corporate/quotation,
| which carries neither an .am-cart nor an .am-checkout wrapper -- and reaches
| nothing in admin. That matters: reset.css is not loaded in admin, so there is no
| mismatch there to fix, and a hardcoded colour would break the dark theme, whose
| borders are driven by var(--bs-border-color).
*/
textarea.form-control,
select.form-control,
.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #ccc;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    padding: 5px 10px;
}

/*
|--------------------------------------------------------------------------
| Variant selector in product details
|--------------------------------------------------------------------------
|
|
*/
.selector {
    cursor: pointer;
}

.colour-selection .selected {
    border: 4px dashed lightgrey;
}

.selection .selected {
    border: 1px dashed royalblue;

}

.selection {
    margin: 10px 15px 0 0;
    min-width: 150px;

}

.selection .btn-group {
    display: block;
}

.selected i.fa {
    position: relative;
    top: 3px;
}

.colour-selector i.fa {
    position: relative;
    top: 8px;
    left: 10px;
}

.selection h4 {
    /*font-size: 14px;*/
    /*font-weight: bold;*/
    /*text-transform: none;*/
    margin-bottom: 5px;
}

/*
|--------------------------------------------------------------------------
| Top nav
|--------------------------------------------------------------------------
|
|
*/

.slicknav_menu .slicknav_icon-bar {
    background-color: var(--artemis-red);
}

.slicknav_nav li:hover a, .slicknav_nav .slicknav_arrow {
    color: var(--artemis-red);
}

.header.shop .nav li .dropdown li:hover a {
    background-color: var(--artemis-red);
    text-decoration: underline;
}

.pagination {
    margin: 15px 0 30px;
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover,
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    border-color: darkgray;
}

.pagination > li > a, .pagination > li > span {
    padding: 20px;
}

.product-details h1 {
    margin-top: 20px;
}

.product-price {
    font-weight: bold;
    font-size: 18px;
}

.add-to-cart-btn, .update-cart-item-btn {
    border: 1px #fc466b solid;
    background-color: white;
    color: #fc466b;
    width: 100%;
}

.static-content ul li {
    list-style: inside;
}

.modal {
    z-index: 9999;
}

.modal-header, .modal-footer {
    display: block;
}

.modal-footer {
    padding: 30px 0 0 0;
}

.modal-title {
    font-size: 22px;
}

.modal-footer {
    border: 0;
}

.modal-dialog .modal-content .modal-header .close {
    border: 0;
}

.modal-dialog .modal-content .modal-header .close:hover {
    color: #fff;
    border-color: transparent;
    background: black;
}

.header .shopping .shopping-item {
    top: 30px;
}

.footer-top {
    padding: 20px 0;
}

.footer-top td {
    border: 0;
    padding: 15px;
}

.footer ul,
.footer li,
.footer p,
.footer a {
    color: white !important;
}

.footer h1,
.footer h2,
.footer h3,
.footer h1 a,
.footer h2 a,
.footer h3 a {
    color: var(--artemis-red) !important;
}


.shopping-cart {
    padding-bottom: 100px;
}

.shopping-cart .table td {
    padding: 15px;
}

.shopping-summery thead tr th {
    background-color: lightgrey;
}

.product-name {
    font-size: 1.2em;
    font-weight: bold;
}

.shopping-summery div.form-group span.readonly {
    border: 0;
}

.shopping-summery div.form-group {
    padding-right: 0;
}

.shop-by-section {
    margin-bottom: 30px;
}


.shop-by-section h1 {
    margin-top: 30px;
    font-size: 30px;
}

.product-details table {
    margin: 15px 0;
}


/*
|--------------------------------------------------------------------------
| Marking as favourite in product details
|--------------------------------------------------------------------------
|
|
*/

.is-favourite {
    color: red;
}


.header.shop .main-category li .mega-menu .single-menu .title-link {
    margin: 10px 0;
}

.header.shop .main-category li .mega-menu .single-menu .inner-link {
    margin-top: 10px;
}


.selector.un-available {
    text-decoration: line-through;
}

.selected i.fa {

    color: forestgreen;
    text-shadow: white 1px 1px;
!important;
}

i.selection-checkmark {
    color: forestgreen;
    text-shadow: white 1px 1px;
!important;
}

.selection .selected {
    border: 1px solid forestgreen;
    /*background-color: lightgreen;*/
}

.non-colour-selector {
    background-color: white;
}

/* Datatable tile view*/
.productAlsoAvailableOnDatatableDt tr,
.productAlsoAvailableOnDatatableDt tr td {
    float: left;
    width: 218px;
    height: 240px;
    border: none;
}

.table-hover.productAlsoAvailableOnDatatableDt tbody tr:hover {
    background-color: transparent;
    border: 1px solid #ddd;
}

.productAlsoAvailableOnDatatableDt > tbody > tr > td {
    border: none;
}

.productAlsoAvailableOnDatatableDt thead {
    visibility: hidden;
    display: none;
}

.pagination > li > a, .pagination > li > span {
    padding: 10px;
    /*margin: 5px;*/
}

.also-available-in-container {
    margin: 40px 0 0 0;
}

.image-template-selector {
    padding: 10px;
    width: 130px;
}

.image-template-selector.selected-image-template {
    border: 2px solid forestgreen;
    border-radius: 10px;
    height: 130px;

}

.print-position-badge {
    position: relative;
    top: -40px;
    right: -10px;
}

.form-control {
    padding: 0;
}

.header-inner {
    height: fit-content;
}

.buy-now-btn {
    border: 2px #fc466b solid;
    background-color: white;
    color: #fc466b;
    font-weight: bold;
}


/* Custom color input >>> */
input[type="color"] {
    -webkit-appearance: none;
    padding: 5px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

/* <<< Custom color input */

/* Pagination >>> */

.pagination > li > a, .pagination > li > span {

    padding: 12px;
    margin-left: -1px;

    /*border: 2px solid var(--artemis-red);*/
}


/* simple pagination >>> */

/*ul.simple-pagination li span,ul.simple-pagination li a{*/
/*    width: 300px;*/
/*}*/
/* <<< simple pagination */


/* Sale badge >>> */
.product-block {
    position: relative;
}

.sale-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background-color: var(--artemis-red, #fc466b);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1;
}

.sale-badge.sale-badge-inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.product-price-original {
    color: #999;
    margin-right: 6px;
}

.product-price-sale {
    color: var(--artemis-red, #fc466b);
    font-weight: bold;
}

.product-sale-note {
    color: var(--artemis-red, #fc466b);
    font-size: 0.85em;
    font-weight: bold;
    min-height: 1.2em;
    line-height: 1.2em;
}
/* <<< Sale badge */

/* >>> Responsive product tile image
   The product viewer renders a fixed --viewer-size (e.g. 300px) composite built
   from nested px-sized layers, so it cannot shrink to a narrow column on its own.
   Scale it down to the column width using container-query units. Only tiles wrap
   the viewer in .viewer-responsive, so the product details page is unaffected. */
.viewer-responsive {
    width: 100%;
    max-width: var(--viewer-size, 300px);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}
.viewer-responsive .texture-container {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    /* --viewer-scale is set by scaleProductViewers() = wrapperWidth / viewerSize. */
    transform: scale(var(--viewer-scale, 1));
}
/* <<< Responsive product tile image */



/* ==========================================================================
   2. Navbar
   was: project/css/shop-navbar.css
   ========================================================================== */

/* Text sizes come from the .f-* scale in project.css, set on the markup — nav
   links, mega-menu headings and sublists, drawer toggle and sublists, the primary
   button and the account menu are all .f-14. Where the old rule targeted a
   descendant (.am-mega__sub a, .am-drawer__sub a, .am-account__menu a) the class
   goes on the container and the anchors inherit.

   Six sizes stay OFF the scale here, deliberately:
     .am-logo a (24/19)     — sizes admin-authored HTML from the `shop-logo`
                              content record, which is usually an <img>; the
                              font-size is only a fallback for a text logo.
     .am-search button (17) — sizes a glyph, not text.
     .am-action (22/19)     — same, the cart/account/wishlist icons.
     .am-drawer__close (26) — same, the × glyph.
     .am-cart-count (10)    — below the scale's 14px floor.
     .am-search input (15)  — a scale class would step it to 14.5px on phones, and
                              inputs under 16px trigger iOS Safari's zoom-on-focus.
                              It already zooms at 15px; going through the scale
                              would make that marginally worse. The real fix is a
                              fixed 16px, which is a behaviour change and belongs
                              in its own commit (§1.5), not smuggled in here. */

/* ==========================================================================
   Shop navbar (Artemis)
   Scoped under .am-* so it does not collide with the eshop template CSS.
   Paired with:
     resources/views/project/layouts/shop/includes/sections/search-bar.blade.php
     resources/views/project/layouts/shop/includes/sections/navs.blade.php
   ========================================================================== */

:root {
    --am-pink: var(--artemis-red, #ff325a);
    --am-ink: #1b1b1b;
    --am-muted: #4a4a4a;
    --am-line: #e6e6e6;
    --am-radius: 6px;
    --am-topbar-h: 74px;

    /* Mobile search row — its height and the gap under it. These two are also what the
       sticky header offsets itself by below 767px (see Breakpoints), so they are shared
       custom properties rather than literals in three places: the offset is derived from
       the same numbers that size the row, and the two cannot drift apart. Changing either
       moves the row and the offset together, which is the only correct way to change them.
       The height is explicit precisely so the offset is exact — deriving it from padding +
       line-height would leave a font-dependent sliver of the row pinned on screen. */
    --am-msearch-h: 44px;
    --am-msearch-gap: 12px;
}

/* Body scroll lock while the drawer is open.
   `overflow: hidden` on <body> — what this used to be — is simply ignored by iOS Safari,
   so the page carried on scrolling underneath the open drawer. `position: fixed` is the
   only lock that platform honours, but it collapses the page to the top, so the JS in
   navs.blade.php stores the scroll offset in `top` before locking and restores the window
   to it on unlock. Do not "simplify" this back to overflow alone. */
.am-no-scroll {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* --------------------------------------------------------- Top bar ------- */

.am-topbar {
    background: #fff;
    border-bottom: 1px solid var(--am-line);
}

.am-topbar__inner {
    /* width comes from Bootstrap .container in the markup */
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--am-topbar-h);
}

.am-logo {
    flex: 0 1 auto;
    min-width: 0; /* allow the logo to shrink instead of forcing overflow */
    display: flex;
    align-items: center;
}

.am-logo img,
.am-logo svg {
    max-height: 42px;
    width: auto;
    display: block;
}

.am-logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--am-ink);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: .5px;
}

/* The logo markup comes from the `shop-logo` content record and usually carries
   .logo, which the eshop template floats and pushes down inside .header.shop. */
.am-topbar .logo {
    float: none;
    margin: 0;
    line-height: 1;
}

/* --------------------------------------------------------- Search -------- */

.am-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--am-pink);
    border-radius: var(--am-radius);
    background: #fff;
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
}

.am-search input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    padding: 11px 16px;
    font-size: 15px;
    color: var(--am-ink);
    background: transparent;
    min-width: 0;
}

.am-search input::placeholder {
    color: #9b9b9b;
}

.am-search button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--am-pink);
    padding: 0 16px;
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
}

.am-search--mobile {
    display: none;
}

/* -------------------------------------------------------- Actions -------- */

.am-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.am-action,
.am-action:visited {
    position: relative;
    color: var(--am-ink);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.am-action:hover {
    color: var(--am-pink);
}

.am-cart-count {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--am-pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--am-radius);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

/* The eshop reset (css/reset.css) declares `a:visited { color: inherit }`. That is
   specificity 0,1,1 and outranks a plain class rule at 0,1,0, so once a link has been
   visited its colour silently falls back to the inherited body colour (#333).
   Every anchor colour below therefore has to name :visited explicitly. */
.am-btn--primary,
.am-btn--primary:link,
.am-btn--primary:visited,
.am-btn--primary:hover,
.am-btn--primary:focus,
.am-btn--primary:active {
    background: var(--am-pink);
    color: #fff;
}

.am-btn--primary:hover,
.am-btn--primary:focus {
    background: #e02a4d;
}

/* Cart panel — sections/cart-dropdown.blade.php.

   Opens on hover and on :focus-within, so it is reachable by keyboard. It is NOT
   a click menu like .am-account: the icon underneath is a link to the cart, and
   stealing that click to open a panel would take away the one thing a cart icon
   has always done. */

.am-cart-menu {
    position: relative;
    display: inline-flex;
}

.am-cart-menu__panel {
    position: absolute;
    right: 0;
    /* No gap: the panel has to touch the icon or the pointer crosses dead space
       on the way down and the panel closes under it. Its own top padding is what
       keeps the content clear of the icon. */
    top: 100%;
    width: 300px;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid var(--am-line);
    border-radius: var(--am-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s ease;
    /* Above .am-account__menu (1200) — the cart sits to its left and the two
       panels overlap when both are open. */
    z-index: 1250;
}

.am-cart-menu:hover .am-cart-menu__panel,
.am-cart-menu:focus-within .am-cart-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.am-cart-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--am-line);
    color: var(--am-muted);
}

.am-cart-menu__head a,
.am-cart-menu__head a:visited {
    color: var(--am-pink);
    font-weight: 600;
    text-decoration: none;
}

.am-cart-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.am-cart-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--am-line);
}

/* The viewer inside draws at a fixed pixel size and can overflow its own box on
   some templates; the panel must not grow or scroll sideways because of it. */
.am-cart-menu__media {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f5f9;
}

.am-cart-menu__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Two lines, then clipped: cart item names carry the full variant description and
   run to 100+ characters, which would make the panel taller than the viewport. */
.am-cart-menu__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--am-ink);
    line-height: 1.35;
}

.am-cart-menu__qty {
    color: var(--am-muted);
}

.am-cart-menu__more {
    margin: 10px 0 0;
    color: var(--am-muted);
}

.am-cart-menu__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-weight: 700;
    color: var(--am-ink);
}

.am-cart-menu__empty {
    margin: 4px 0 12px;
    color: var(--am-muted);
}

.am-cart-menu__checkout {
    width: 100%;
    margin-top: 12px;
}

/* Account dropdown */

.am-account {
    position: relative;
}

.am-account__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 180px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--am-line);
    border-radius: var(--am-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .18s ease;
    z-index: 1200;
}

.am-account.is-open .am-account__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.am-account__menu a,
.am-account__menu a:visited {
    display: block;
    padding: 9px 18px;
    color: var(--am-muted);
    text-decoration: none;
}

.am-account__menu a:hover {
    background: #faf7f8;
    color: var(--am-pink);
}

/* ------------------------------------------------------- Link row -------- */

.am-nav {
    position: relative; /* containing block for .am-mega */
    background: #fff;
    border-bottom: 1px solid var(--am-line);
}

.am-nav__list {
    /* width comes from Bootstrap .container in the markup */
    padding-top: 0;
    padding-bottom: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

.am-nav__item {
    position: static;
}

.am-nav__link,
.am-nav__link:visited {
    display: block;
    padding: 13px 6px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--am-ink);
    text-decoration: none;
    white-space: nowrap;
}

.am-nav__link:hover {
    color: var(--am-pink);
}

/* --------------------------------------------------------- Mega ---------- */

.am-mega {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--am-line);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s ease;
    z-index: 1100;
}

.am-nav__item--has-mega:hover .am-mega,
.am-nav__item--has-mega:focus-within .am-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.am-mega__inner {
    padding-top: 26px;
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px 26px;
    max-height: 65vh;
    overflow-y: auto;
}

.am-mega__head,
.am-mega__head:visited {
    display: block;
    margin-bottom: 9px;
    font-weight: 700;
    color: var(--am-ink);
    text-decoration: none;
}

.am-mega__head:hover {
    color: var(--am-pink);
}

.am-mega__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-mega__sub a,
.am-mega__sub a:visited {
    display: block;
    padding: 4px 0;
    color: var(--am-muted);
    text-decoration: none;
}

.am-mega__sub a:hover {
    color: var(--am-pink);
}

.am-mega__footer {
    padding-top: 12px;
    padding-bottom: 20px;
}

.am-mega__footer a,
.am-mega__footer a:visited {
    font-weight: 600;
    color: var(--am-pink);
    text-decoration: none;
}

/* ------------------------------------------------------- Burger ---------- */

.am-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.am-burger span {
    display: block;
    height: 2px;
    width: 22px;
    background: var(--am-ink);
    border-radius: 2px;
}

/* ------------------------------------------------------- Drawer ---------- */

.am-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.am-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s ease;
}

.am-drawer.is-open .am-drawer__backdrop {
    opacity: 1;
}

.am-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 330px;
    background: #fff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s ease;
}

.am-drawer.is-open .am-drawer__panel {
    transform: translateX(0);
}

.am-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--am-line);
    font-weight: 700;
    color: var(--am-ink);
}

.am-drawer__close {
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--am-muted);
    cursor: pointer;
}

.am-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* The drawer is a THREE-level accordion: Product → root category → subcategory.
   Every relationship below is expressed with a child combinator (`>`), never a descendant
   one, and that is load-bearing rather than stylistic. A level-2 root is itself an
   .am-drawer__item holding its own .am-drawer__sub, so the old descendant rules
   (`.am-drawer__item.is-open .am-drawer__sub`, `.am-drawer__item.is-open .am-drawer__caret`)
   would have matched straight through one level into the next: opening "Product" would
   have expanded all six root categories at once and flipped all six carets with it.
   `>` keeps each level keyed to its own state, and the same two rules then serve both
   levels with no duplication. */

/* Level 1 — the top-level rows. Scoped under `.am-drawer__list >` so the level-2 rows,
   which are also .am-drawer__item, do not pick up the uppercase treatment and then fight
   the .am-drawer__sub rules on source order (both are 0,2,0). */
.am-drawer__list > .am-drawer__item > a,
.am-drawer__list > .am-drawer__item > a:visited,
.am-drawer__list > .am-drawer__item > .am-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    background: transparent;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--am-ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.am-drawer__caret {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--am-muted);
    border-bottom: 2px solid var(--am-muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.am-drawer__item.is-open > .am-drawer__toggle .am-drawer__caret {
    transform: rotate(-135deg);
}

.am-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fafafa;
}

.am-drawer__item > .am-drawer__sub {
    display: none;
}

.am-drawer__item.is-open > .am-drawer__sub {
    display: block;
}

.am-drawer__sub a,
.am-drawer__sub a:visited {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 18px 11px 32px;
    color: var(--am-muted);
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
}

/* Level 2 — a root category that has children. It is a <button>, so it gets the row
   styling that the sibling <a> rows get from .am-drawer__sub above, restated here. */
.am-drawer__toggle--sub {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 11px 18px 11px 32px;
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    background: transparent;
    color: var(--am-ink);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.am-drawer__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Subcategory count. Tells the customer there is something behind the caret — without it
   an unexpanded root looks identical to a leaf. */
.am-drawer__count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ececec;
    color: var(--am-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Level 3 — subcategories, indented one step further and on a deeper tint so the nesting
   reads without a rule or a caret. */
.am-drawer__sub--deep {
    background: #f4f4f4;
}

.am-drawer__sub--deep a,
.am-drawer__sub--deep a:visited {
    padding-left: 46px;
}

/* "Shop all <root>" / "View all products" — the destination the parent row would have gone
   to if it were still a link. Coloured so it does not read as just another sibling. */
.am-drawer__shop-all,
.am-drawer__shop-all:visited {
    color: var(--am-pink);
    font-weight: 600;
}

/* Focus ring. The drawer traps Tab, so the trap is only usable if the current row is
   visible — an inset ring rather than an outline, because the rows run edge to edge and a
   normal outline would be clipped on both sides. :focus-visible, so a tap or click does
   not leave a ring sitting on the row behind the user's finger. */
.am-drawer__panel a:focus-visible,
.am-drawer__panel button:focus-visible {
    outline: 2px solid var(--am-pink);
    outline-offset: -2px;
    background: #fff5f7;
}

/* --------------------------------------------------- Breakpoints --------- */

/* Touch / tablet — the drawer replaces the link row from here down.
   The boundary is 1100px, not 767px, because .am-mega only opens on :hover/:focus-within
   and there is no hover on a touch screen: between 768 and 1100 an iPad got the desktop
   link row whose "Product" panel could not be opened at all, so tapping it just navigated
   away and the whole category tree was unreachable. The drawer works with taps, so every
   touch-sized viewport now gets the drawer instead.

   This retires the old horizontal-scrolling .am-nav__list rule that used to live at this
   breakpoint — the row it scrolled is no longer rendered here. */
@media (max-width: 1100px) {
    .am-nav {
        display: none;
    }

    .am-burger {
        display: flex;
    }

    /* Same reason the link row goes: there is no hover here, so the panel could only
       be opened by focus, and a 300px panel on a phone covers the page it is meant to
       preview. The icon keeps working — it is a link to the cart. */
    .am-cart-menu__panel {
        display: none;
    }

    /* Sticky header. z-index 1040 is chosen between two existing layers: above the
       chat-widget launcher (1030) and BELOW Bootstrap's modal layer (1050), so the shop's
       delete/confirm/message modals still cover the header rather than being cut by it.

       Note this makes the header a stacking context, which confines two descendants:
       .am-account__menu (1200) and .am-drawer (2000) now paint at the header's 1040
       rather than their own value. Neither is a live problem — both still sit above all
       page content, the mega-menu is not rendered at this width, and a modal cannot be
       opened while the drawer holds the scroll lock — but it is why raising a child's
       z-index here would have no effect. The drawer is still viewport-anchored: sticky,
       unlike transform, does not create a containing block for position:fixed. */
    .am-header {
        position: sticky;
        top: 0;
        z-index: 1040;
    }
}

/* Touch targets — a 44px minimum hit area on the icon controls, which are glyphs with no
   padding of their own (.am-action was ~22x22, .am-burger 34x34). The GLYPH sizes are
   untouched; the box grows around them via padding and a negative margin, so nothing moves
   visually and the top row keeps its spacing. Applied at the drawer breakpoint rather than
   globally: these are pointer-precision fixes, and widening them on desktop would add
   22px of dead space either side of the cart icon for no benefit. */
@media (max-width: 1100px) {
    .am-action {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .am-burger {
        width: 44px;
        height: 44px;
        align-items: center;
        margin-left: -5px; /* keep the bars flush with the container edge */
    }

    .am-drawer__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px; /* the x stays optically on the panel's padding line */
    }

    .am-btn {
        min-height: 44px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .am-topbar__inner {
        gap: 12px;
        padding: 10px 14px;
        min-height: 0;
    }

    .am-logo {
        margin-right: auto;
    }

    .am-logo img,
    .am-logo svg {
        max-height: 32px;
    }

    .am-logo a {
        font-size: 19px;
    }

    /* Inline search moves to its own row */
    .am-topbar__inner > .am-search {
        display: none;
    }

    .am-search--mobile {
        display: flex;
        max-width: none;
        height: var(--am-msearch-h);
        margin: 0 14px var(--am-msearch-gap);
    }

    /* Partial sticky on phones. The full header here is the icon row PLUS the search row,
       around 120px — pinning all of it costs roughly a fifth of a phone viewport on every
       screen. So the header is offset upward by exactly the search row's own height plus
       its gap: the search scrolls off the top and the icon row (burger, logo, cart,
       account) pins beneath it, which is the part you need while scrolling a product grid.
       Search is one short upward scroll away rather than gone.

       The offset is computed from the same two custom properties that size the row above,
       so it is exact by construction and cannot be knocked out of step by editing one
       number. From 768 to 1100px there is no separate search row — search sits inline in
       the icon row — so the header stays fully pinned at top: 0 from the rule above. */
    .am-header {
        top: calc(-1 * (var(--am-msearch-h) + var(--am-msearch-gap)));
    }

    .am-actions {
        gap: 12px;
    }

    /* Height comes from the 44px touch-target minimum set at the 1100px breakpoint above;
       only the horizontal padding tightens here. The old `height: 34px` was removed rather
       than left in place — min-height wins over it, so it was a dead declaration that read
       as if it still set the button's size. */
    .am-btn {
        padding: 0 16px;
    }

    /* .am-nav is hidden from 1100px up-stream; nothing to restate here. */
}

/* Small phones — keep the top row on one line */
@media (max-width: 400px) {
    .am-topbar__inner {
        gap: 8px;
        padding: 10px 10px;
    }

    .am-logo img,
    .am-logo svg {
        max-height: 26px;
    }

    .am-actions {
        gap: 9px;
    }

    /* Glyph shrinks; the 44px hit box from the 1100px breakpoint stays. */
    .am-action {
        font-size: 19px;
    }

    .am-btn {
        padding: 0 12px;
    }

    /* Side inset tightens; the height and the bottom gap stay on the shared properties so
       the sticky offset above stays exact at this width too. */
    .am-search--mobile {
        margin: 0 10px var(--am-msearch-gap);
    }
}


/* ==========================================================================
   3. Hero
   was: project/css/shop-hero.css
   ========================================================================== */

/* ==========================================================================
   Shop home hero carousel (Artemis)

   Each slide is a complete banner image (headline, copy and CTA are part of the
   artwork), so the whole slide is one link and no text is laid over it.

   Sizing: width comes from Bootstrap's .container in the markup, so the hero lines
   up with every other section on the page (custom.css widens .container to 1360px
   above 1400px viewport, 1560px above 1600px). Height follows the artwork's own
   aspect ratio.

   Scoped under .am-hero__* so it does not collide with the eshop template CSS.
   Paired with: resources/views/project/shop/home/includes/hero-banner.blade.php
   ========================================================================== */

:root {
    --am-hero-radius: 16px;
}

.am-hero {
    /* horizontal width comes from Bootstrap .container in the markup */
    padding: 22px 0 26px;
    background: #fff;
}

/* ----------------------------------------------------------- Frame ------- */

.am-hero__frame {
    position: relative;
    border-radius: var(--am-hero-radius);
    overflow: hidden;
    background: #f4f4f5;
    box-shadow: 0 1px 2px rgba(17, 17, 19, .06), 0 10px 30px rgba(17, 17, 19, .07);
}

/* ----------------------------------------------------------- Slides ------ */

/* Swiper 11 owns the track, the transform and the fade; everything below is the
   storefront's skin on top of it. The .am-hero__* names are kept from the
   hand-rolled version so the blade and this file still read as one component. */

.am-hero__slide {
    display: block;
    text-decoration: none;
}

/* width/height attributes come off the upload row, so `height: auto` here keeps the
   image fluid while the browser still reserves the right box from the ratio those
   attributes give it — no collapse before the file lands, no reflow after. */
.am-hero__slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Only anchors that actually carry an href behave as links */
.am-hero__slide[href] {
    cursor: pointer;
}

/* Swiper's own stylesheet is loaded before this file, so these win on source order
   and nothing here needs !important. */
.am-hero__swiper {
    width: 100%;
    /* Clip here as well as on the frame. Swiper's own .swiper rule does this, but
       stating it means a failed or stale stylesheet cannot leave five banners
       spilling across the page. */
    overflow: hidden;
}

/* One banner per view is stated in CSS, not left to the JS. Until Swiper
   initialises — and if it never does, because the script 404s or throws — the
   wrapper is still a flex row, and without this every slide sits at its natural
   width in one long line. With it, a dead slider degrades to the first banner. */
.am-hero__swiper .swiper-slide {
    flex: 0 0 100%;
    width: 100%;
    /* Swiper's base rule is height:100%; the banners set their own height from the
       artwork's aspect ratio. */
    height: auto;
}

/* ------------------------------------------------------------ Dots ------- */

/* Swiper's bullets, restyled from its defaults: a pill for the active slide
   rather than a larger dot, on a light halo so they read over pale artwork. */
.am-hero__dots.swiper-pagination-bullets {
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

.am-hero__dots .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 50%;
    background: rgba(17, 17, 19, .26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
    opacity: 1;
    transition: background-color .2s ease, width .2s ease, border-radius .2s ease;
}

.am-hero__dots .swiper-pagination-bullet:hover {
    background: rgba(17, 17, 19, .5);
}

.am-hero__dots .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 5px;
    background: #111113;
}

/* ---------------------------------------------------------- Arrows ------- */

/* Hidden until the hero is hovered or something inside it takes focus: on a
   banner the arrows are an affordance, not furniture, and they sit on artwork
   whose composition they would otherwise interrupt. */
.am-hero__nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(17, 17, 19, .18);
    color: #111113;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.am-hero__frame:hover .am-hero__nav,
.am-hero__frame:focus-within .am-hero__nav {
    opacity: 1;
}

.am-hero__nav:hover {
    background: #fff;
}

.am-hero__nav::after {
    font-size: 16px;
    font-weight: 700;
}

/* Swiper hides a disabled arrow with opacity, which the rule above would undo. */
.am-hero__nav.swiper-button-disabled {
    opacity: 0;
}

/* Touch screens have no hover, and a 40px target on top of a tappable banner is
   more likely to be hit by accident than on purpose. Dots and swipe remain. */
@media (max-width: 767px) {
    .am-hero__nav {
        display: none;
    }
}

/* ------------------------------------------- Empty state (no uploads) ---- */

.am-hero--empty {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 300px;
    padding: 0;
    background-image:
        radial-gradient(58% 62% at 4% 0%, rgba(206, 233, 122, .62) 0%, rgba(206, 233, 122, 0) 62%),
        radial-gradient(56% 60% at 88% 2%, rgba(252, 214, 128, .60) 0%, rgba(252, 214, 128, 0) 60%),
        radial-gradient(62% 66% at 96% 100%, rgba(250, 160, 196, .58) 0%, rgba(250, 160, 196, 0) 64%),
        radial-gradient(58% 62% at 10% 100%, rgba(196, 214, 250, .48) 0%, rgba(196, 214, 250, 0) 62%);
}

.am-hero__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* --------------------------------------------------- Breakpoints --------- */

@media (max-width: 991px) {
    .am-hero {
        padding: 16px 0 20px;
    }

    :root {
        --am-hero-radius: 12px;
    }
}

@media (max-width: 767px) {
    .am-hero {
        padding: 10px 0 14px;
    }

    :root {
        --am-hero-radius: 10px;
    }

    .am-hero__dots.swiper-pagination-bullets {
        bottom: 8px;
        gap: 6px;
    }

    .am-hero__dots .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
    }

    .am-hero__dots .swiper-pagination-bullet-active {
        width: 16px;
        border-radius: 4px;
    }

    .am-hero--empty {
        min-height: 200px;
    }
}

/* Autoplay is not started at all under reduced motion (the blade checks the same
   query), so this only has to stop the transition between manual slides. */
@media (prefers-reduced-motion: reduce) {
    .am-hero__swiper .swiper-wrapper,
    .am-hero__swiper .swiper-slide {
        transition-duration: 0ms;
    }
}


/* ==========================================================================
   4. Sections
   was: project/css/shop-sections.css
   ========================================================================== */

/* ==========================================================================
   Shop home sections (Artemis)

   Shared shell (.am-section) plus the merch-shop and category card grids.
   Scoped under .am-* so it does not collide with the eshop template CSS.

   Width comes from Bootstrap's .container in the markup, matching the legacy
   .shop-by-section blocks (custom.css widens .container to 1360px above 1400px
   viewport, 1560px above 1600px). Sections only own vertical rhythm.

   Paired with: resources/views/project/shop/home/includes/section-*.blade.php
   ========================================================================== */

/* ---------------------------------------------------------- Shell -------- */

.am-section {
    /* horizontal width comes from Bootstrap .container in the markup */
    padding: 46px 0 52px;
    background: #fff;
}

.am-section__inner {
    /* .container governs width; kept as a hook for section-level tweaks */
}

/* The hero already carries bottom padding — tighten the first section under it */
.am-hero + .am-section {
    padding-top: 30px;
}

/* Sizes across every home section come from the .f-* scale in project.css, set on
   the markup: titles .f-24, subtitles .f-20, body .f-18, CTAs .f-20. Do NOT add a
   font-size back into these rules — most are single-class (0,1,0), the same weight
   as a utility, and shop.css loads after project.css, so a font-size here wins on
   source order and the class on the element silently does nothing. */
.am-section__title {
    margin: 0 0 30px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--artemis-red, #ff325a);
}

/* Left-aligned section head with an action on the right */

.am-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.am-section__eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #111113;
}

.am-section__heading {
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #111113;
}

.am-section__sub {
    margin: 0;
    line-height: 1.6;
    color: #4d4d50;
}

.am-section__head .am-btn-outline {
    flex: 0 0 auto;
    margin-top: 4px;
}

.am-section__more {
    margin-top: 28px;
    text-align: center;
}

.am-section__more a,
.am-section__more a:visited {
    display: inline-block;
    padding: 9px 22px;
    border: 1px solid #dcdcdf;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #111113;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.am-section__more a:hover {
    border-color: #111113;
    background: #fafafa;
}

/* ------------------------------------------------------ Promo block ------ */

/* Two-column pitch: copy on the left, artwork on the right. */
.am-promo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 48px;
    margin-bottom: 44px;
}

.am-promo__title {
    margin: 0 0 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--artemis-red, #ff325a);
}

.am-promo__body {
    margin: 0 0 24px;
    max-width: 380px;
    line-height: 1.6;
    color: #4d4d50;
}

.am-promo__lead {
    margin: 0 0 10px;
    color: #4d4d50;
}

/* Not in the four-role scale — a bullet list is body copy, so it takes .f-18 on
   the <ul> and the items inherit it. */
.am-promo__list {
    margin: 0 0 26px;
    padding-left: 18px;
    line-height: 1.7;
    color: #4d4d50;
}

/* Height follows the 20px CTA text: 40px left only 8px of vertical breathing room
   once the label grew from 14px. */
.am-promo__cta,
.am-promo__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    border-radius: 8px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease;
}

.am-promo__cta:hover,
.am-promo__cta:focus {
    background: #e02a4d;
    color: #fff;
}

.am-promo__media {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
}

.am-promo__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Portrait artwork: give the copy the wider column and cap the image */
.am-promo--tall-media {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.am-promo--tall-media .am-promo__media {
    max-width: 420px;
    margin-left: auto;
}

/* Dark-headline variant of the promo block, used by the bulk-order section */

.am-promo__title--dark {
    color: #111113;
    letter-spacing: -.6px;
    margin-bottom: 14px;
}

.am-promo__sub {
    margin: 0 0 20px;
    color: #6f6f71;
}

.am-promo__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------- Bulk-order section ---- */

/* The bulk section shares .am-promo with the earn section, so anything set here is
   scoped to .am-bulk. Sizes are NOT set here any more — the sections all run on the
   same .f-* scale now, so only the things genuinely unique to this section remain:
   the uppercase eyebrow, the dropped measure cap, and the rounder media. */

/* Eyebrow is below the scale's floor and deliberately off it — it is a label, not
   a text role, and 12px uppercase is its whole point. */
.am-bulk .am-promo__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6f6f71;
}

.am-bulk .am-promo__title--dark {
    letter-spacing: -.8px;
    margin-bottom: 12px;
}

.am-bulk .am-promo__sub {
    margin: 0 0 18px;
    color: #55555a;
}

/* No px cap: the base rule's 380px was written when the copy column was 5fr and
   stopped tracking it once the section moved to --tall-media (7fr), so the body
   runs the full column. Size lives on .f-18 in the markup (scale in project.css). */
.am-bulk .am-promo__body {
    max-width: none;
    margin-bottom: 28px;
    line-height: 1.6;
}

.am-bulk .am-promo__media {
    border-radius: 20px;
}

/* Button sizing now lives on the shared .am-btn-* rules, which carry the height for
   20px CTA text across every section — the bulk-only override this replaced would
   have made these two buttons smaller than the rest. */

.am-btn-dark,
.am-btn-dark:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border: 1px solid #111113;
    border-radius: 4px;
    background: #111113;
    color: #fff;
    text-decoration: none;
    transition: background-color .18s ease;
}

.am-btn-dark:hover {
    background: #000;
    color: #fff;
}

/* :focus was bundled into the hover rule above, so a keyboard user got exactly the same
   feedback as a mouse-over — i.e. no way to tell where focus actually is. Hover is now
   hover; focus gets a ring of its own (see the shared :focus-visible rule below). */
.am-btn-dark:active {
    background: #000;
}

/* ------------------------------------------------------ Merch grid ------- */

/* Six across with a 16px column gap — the same track as .am-cat__grid and
   .am-featgrid, so the merch, category, artist and theme tiles are all the same
   square box down the home page. Change the column gap in one of the three and the
   others stop lining up; change all three together. */
.am-merch__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 16px;
}

.am-merch-card,
.am-merch-card:visited {
    display: block;
    color: inherit;
    text-decoration: none;
}

.am-merch-card__cover {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f1f3;
}

.am-merch-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.am-merch-card:hover .am-merch-card__cover img {
    transform: scale(1.04);
}

.am-merch-card__body {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    min-width: 0;
}

.am-merch-card__avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9e9ec;
}

.am-merch-card__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.am-merch-card__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.am-merch-card__name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #111113;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.am-merch-card__count {
    font-size: 11px;
    line-height: 1.3;
    color: var(--artemis-red, #ff325a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------- Customize ------- */

.am-create__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
}

.am-create__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6f6f71;
}

.am-create__title {
    margin: 0 0 18px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.6px;
    color: #111113;
}

.am-create__body {
    margin: 0 0 24px;
    line-height: 1.65;
    color: #4d4d50;
}

.am-btn-outline,
.am-btn-outline:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border: 1px solid #c9c9cd;
    border-radius: 4px;
    color: #111113;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}

/* Translucent, not the opaque #fafafa this used to be. That value is also the background
   of .am-cart__summary (and any other tinted panel), so an outline button sitting on one
   had NO visible hover — the "highlight" was the exact colour underneath it. A wash works
   against whatever it happens to sit on. */
.am-btn-outline:hover {
    border-color: #111113;
    background: rgba(17, 17, 19, .045);
}

.am-btn-outline:active {
    background: rgba(17, 17, 19, .09);
}

.am-btn-link,
.am-btn-link:visited {
    color: #111113;
    text-decoration: none;
}

.am-btn-link:hover {
    color: var(--artemis-red, #ff325a);
}

/* Keyboard focus for all three. None of them defined one: the outline and link buttons had
   no :focus rule at all, and the dark button's was an alias for :hover.

   :focus-visible rather than :focus, so a mouse click does not leave a ring behind.
   `outline` rather than a box-shadow ring on purpose — .am-cart__checkout uses box-shadow
   for its lift, and an outline cannot collide with it. The 2px offset puts the ring on the
   page background, so it reads against the dark button as well as the light ones. */
.am-btn-dark:focus-visible,
.am-btn-outline:focus-visible,
.am-btn-link:focus-visible {
    outline: 2px solid #111113;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------ Artists ---------- */

/* Same six-column, 16px-gap track as the merch and category grids: an artist tile,
   a theme tile, a merch cover and a category cover all render at the same square,
   so one upload size serves every one of them. The feature tile spans 2x2 of that
   track, i.e. exactly two tiles plus the gap between them. */
.am-featgrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 16px;
}

.am-featgrid__feature,
.am-featgrid__feature:visited {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.am-featgrid__feature img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.am-artist-card,
.am-artist-card:visited {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f1f1f3;
    text-decoration: none;
    color: inherit;
}

.am-artist-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.am-artist-card:hover img {
    transform: scale(1.04);
}

.am-artist-card__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    color: #fff;
}

.am-artist-card__name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.am-artist-card__count {
    font-size: 10.5px;
    line-height: 1.3;
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------- Theme tiles ----------- */

.am-theme-card,
.am-theme-card:visited {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f1f1f3;
    text-decoration: none;
    color: inherit;
}

.am-theme-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.am-theme-card:hover img {
    transform: scale(1.04);
}

/* No THEME_THUMBNAIL upload — stable placeholder instead of a per-load random photo */
.am-theme-card--noimg {
    background-color: #241f2e;
    background-image:
        radial-gradient(circle at 30% 28%, rgba(255, 50, 90, .5) 0 26%, transparent 26.5%),
        radial-gradient(circle at 76% 74%, rgba(96, 180, 240, .42) 0 22%, transparent 22.5%);
}

.am-theme-card__label {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 12px;
    padding: 5px 8px;
    border-radius: 4px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .3px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------ Shop-by tiles ---------- */

.am-shopby__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 18px;
}

.am-shopby-card,
.am-shopby-card:visited {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f1f3;
    text-decoration: none;
    color: inherit;
}

.am-shopby-card__img {
    position: absolute;
    inset: 0;
}

.am-shopby-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.am-shopby-card:hover .am-shopby-card__img img {
    transform: scale(1.04);
}

/* No artwork uploaded yet — a deliberate placeholder beats a broken <img> */
.am-shopby-card--noimg {
    background-color: #2b2b30;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 50, 90, .55) 0 28%, transparent 28.5%),
        radial-gradient(circle at 78% 70%, rgba(255, 170, 60, .45) 0 24%, transparent 24.5%);
}

.am-shopby-card__label {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 10px;
    background: rgba(255, 50, 90, .88);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ------------------------------------------------- Category grid --------- */

.am-cat__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px 16px;
}

.am-cat-card,
.am-cat-card:visited {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f1f3;
    text-decoration: none;
    color: inherit;
}

.am-cat-card__img {
    aspect-ratio: 1 / 1;
}

.am-cat-card__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.am-cat-card:hover .am-cat-card__img img {
    transform: scale(1.04);
}

.am-cat-card__label {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .2px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------- Popular categories: tile treatment ----- */

/* The same card as the /shop-by/products and /shop-by/themes grids (.category-card
   and .theme-card, both in shop/shop-by/): square artwork edge to edge, the name
   over a short gradient scrim at the foot of the picture, the whole tile lifting on
   hover. Kept in step with those pages deliberately — the category grid there shows
   the same categories, and a visitor moving between them should read one card.

   Scoped to .am-popular, NOT applied to .am-cat-card generally: the trending rail
   shares this blade but shows transparent artwork contained on a light ground, where
   a dark scrim would sit on nothing. */

.am-popular .am-cat-card {
    height: 100%;
    border: 1px solid #eee;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.am-popular .am-cat-card:hover,
.am-popular .am-cat-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    text-decoration: none;
}

.am-popular .am-cat-card:focus-visible {
    outline: 2px solid var(--artemis-red, #ff325a);
    outline-offset: 2px;
}

/* Square artwork, as the base .am-cat-card tile already is — only the ground and
   the clipping are added here. */
.am-popular .am-cat-card__img {
    position: relative;
    background: #f5f5f5;
    overflow: hidden;
}

/* The shop-by card holds the artwork still; the zoom belongs to the square tile. */
.am-popular .am-cat-card:hover .am-cat-card__img img,
.am-popular .am-cat-card:focus-visible .am-cat-card__img img {
    transform: none;
}

/* A short scrim — 38% of the tile, enough to seat two lines of a small label and no
   more. Drawn as a pseudo-element so the markup does not change; the blade is shared
   with the trending rail. */
.am-popular .am-cat-card__img::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top,
        rgba(11, 11, 15, .8) 0%,
        rgba(11, 11, 15, .38) 48%,
        rgba(11, 11, 15, 0) 100%);
    pointer-events: none;
}

/* Small tracked caps, clamped to two lines: at six across the name is a label on a
   picture, not a paragraph, and the letter-spacing is what keeps it legible that
   small. -webkit-line-clamp needs the -webkit-box display; the shorthand `line-clamp`
   is not yet safe on the browsers this shop supports. */
.am-popular .am-cat-card__label {
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 10px 12px;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Keeps the brand accent on the tile now that the label has no ground of its own.
   Inside the label, above the text — the card has no space below it. */
.am-popular .am-cat-card__label::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto 7px;
    background: var(--artemis-red, #ff325a);
    transition: width .3s ease;
}

.am-popular .am-cat-card:hover .am-cat-card__label::before,
.am-popular .am-cat-card:focus-visible .am-cat-card__label::before {
    width: 34px;
}

@media (prefers-reduced-motion: reduce) {
    .am-popular .am-cat-card,
    .am-popular .am-cat-card__label::before {
        transition: none;
    }

    .am-popular .am-cat-card:hover,
    .am-popular .am-cat-card:focus-visible {
        transform: none;
    }
}

/* ------------------------------------------------ Trending tiles --------- */

/* Shares .am-cat__grid/.am-cat-card with the popular-categories section, but the
   artwork is a different kind of picture. Categories carry photographic banners that
   fill their frame, so `cover` suits them. Trending tiles show the raw artwork PNG —
   transparent, and anywhere from 300x172 to 321x500 — where `cover` crops a tall
   design's top and bottom off and scales a wide one up until its sides are lost.
   These are contained and centred in the square instead, so the whole design shows.
   The extra bottom padding keeps the artwork clear of the overlaid name label. */
/* No background of its own: it inherits .am-cat-card's #f1f1f3, so the tile still
   reads as a card. White here would make it vanish against the white section. */
.am-trending .am-cat-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px 32px;
}

.am-trending .am-cat-card__img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* The card zoom reads as a wobble on a contained, transparent design — it scales the
   empty box with it. Kept, but softened. */
.am-trending .am-cat-card:hover .am-cat-card__img img {
    transform: scale(1.02);
}

/* --------------------------------------------------- Breakpoints --------- */

/* The three tile grids step down together — 6 / 4 / 3 / 2 — so the box stays the
   same size in every section at every width. */
@media (max-width: 1199px) {
    .am-merch__grid,
    .am-cat__grid,
    .am-featgrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    /* Customize stacks; the artwork drops below the copy */
    .am-create__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 46px 0;
    }

    /* Promo stacks: copy above, artwork below */
    .am-promo,
    .am-promo--tall-media {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-bottom: 32px;
    }

    /* No per-title font-size steps here any more — .f-24 carries its own 991px and
       575px steps from project.css, for every section at once. */

    .am-promo__body {
        max-width: none;
    }

    .am-promo--tall-media .am-promo__media {
        margin-left: 0;
    }

    /* Feature tile goes full width above the artist tiles; the tiles themselves
       drop to 3, in step with the merch and category grids below. */
    .am-featgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .am-featgrid__feature {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 16 / 7;
    }

    .am-shopby__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .am-shopby-card__label {
        font-size: 13px;
        padding: 10px 8px;
    }
}

@media (max-width: 575px) {
    /* No font-size steps here — the .f-* scale in project.css carries its own
       phone steps for every text role on the page. */

    /* Full-width CTAs rather than two pills crowding a 320px row. Applies to every
       section's actions row, not just bulk, now that they share a button size. */
    .am-promo__actions .am-btn-dark,
    .am-promo__actions .am-btn-outline {
        flex: 1 1 100%;
    }

    /* 52px is a lot of button on a phone once it is full width. */
    .am-btn-dark,
    .am-btn-outline,
    .am-promo__cta {
        height: 48px;
    }

    .am-featgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }

    .am-shopby__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }

    .am-shopby-card__label {
        font-size: 11.5px;
        padding: 8px 6px;
    }
}

@media (max-width: 991px) {
    .am-section {
        padding: 36px 0 40px;
    }

    .am-section__title {
        margin-bottom: 24px;
    }

    .am-merch__grid,
    .am-cat__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Promo stacks: text above, media below */
    .am-section__head {
        flex-direction: column;
        gap: 14px;
    }

}

@media (max-width: 575px) {
    .am-section {
        padding: 28px 0 32px;
    }

    .am-hero + .am-section {
        padding-top: 20px;
    }

    .am-section__title {
        margin-bottom: 18px;
    }

    .am-merch__grid,
    .am-cat__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }

    .am-cat-card__label {
        font-size: 9px;
        padding: 4px 6px;
    }

    /* Matches the phone step the shop-by grid gives .category-card__name. */
    .am-popular .am-cat-card__label {
        padding: 0 8px 10px;
        font-size: 10.5px;
        letter-spacing: .06em;
    }

    .am-popular .am-cat-card__label::before {
        width: 16px;
        margin-bottom: 6px;
    }

    .am-section__more {
        margin-top: 20px;
    }
}

@media (max-width: 400px) {
    .am-section {
        padding: 22px 0 26px;
    }

    .am-merch__grid,
    .am-cat__grid,
    .am-featgrid {
        gap: 14px 10px;
    }

    .am-merch-card__avatar {
        width: 22px;
        height: 22px;
    }

    .am-merch-card__name {
        font-size: 11.5px;
    }

    .am-merch-card__count {
        font-size: 10px;
    }
}


/* ==========================================================================
   5. Product grid
   was: project/css/shop-grid.css
   ========================================================================== */

/* ==========================================================================
   Shop product grid (Artemis)

   The product listing grid shared by /shop/products, every category page and
   /favourites. Same .am-* design language as the home sections
   (public/project/css/shop-sections.css) — CSS Grid inside a Bootstrap
   .container, so width tracks the .container steps in custom.css.

   Paired with:
     resources/views/project/shop/generic/products.blade.php
     resources/views/project/shop/generic/product-tiles.blade.php
     resources/views/project/shop/product/includes/product-tile.blade.php

   NOTE: the tile image is the ProductVariantViewer composite — a fixed-px
   stack scaled to the cell by window.scaleProductViewers() in the shop layout.
   Its wrapper (.viewer-responsive) is styled in eshop/css/custom.css; the grid
   only gives it a square, full-width cell to scale into. Anything that appends
   tiles must call window.scaleProductViewers() afterwards.
   ========================================================================== */

/* ------------------------------------------------------------ Grid ------- */

.am-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 22px;
    margin: 0 0 6px;
}

/* --------------------------------------------------------- Product card -- */

.am-prod-card,
.am-prod-card:visited {
    position: relative;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.am-prod-card:hover,
.am-prod-card:focus {
    color: inherit;
    text-decoration: none;
}

/* Media ------------------------------------------------------------------ */

.am-prod-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f4f6;
    transition: box-shadow .2s ease;
}

.am-prod-card:hover .am-prod-card__media {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

/* The viewer composite is absolutely positioned by custom.css — this just
   centres the square it scales into. */
.am-prod-card__media .viewer-responsive {
    height: 100%;
}

.am-prod-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Body ------------------------------------------------------------------- */

.am-prod-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-top: 11px;
}

.am-prod-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Two lines reserved so cards stay aligned whatever the name length */
    min-height: 2.8em;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.4;
    color: #111113;
}

.am-prod-card:hover .am-prod-card__name {
    color: var(--artemis-red, #ff325a);
}

.am-prod-card__price {
    margin-top: 4px;
    font-weight: 600;
    color: #4d4d50;
}

/* Always rendered, even when empty, so on-sale and full-price cards match */
.am-prod-card__note {
    min-height: 1.35em;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--artemis-red, #ff325a);
}

/* CTA — a span, not a link: the whole card is already one anchor */
.am-prod-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin-top: 10px;
    border: 1px solid #c9c9cd;
    border-radius: 4px;
    background: #fff;
    font-weight: 600;
    color: #111113;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.am-prod-card:hover .am-prod-card__cta,
.am-prod-card:focus .am-prod-card__cta {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

/* Keyboard focus must be visible — hover styling alone is not enough */
.am-prod-card:focus-visible {
    outline: 2px solid var(--artemis-red, #ff325a);
    outline-offset: 4px;
    border-radius: 12px;
}

/* ------------------------------------------- Removable card (favourites) -- */

/* The favourites grid wraps each card so the remove button has something to be
   positioned against — it cannot sit inside .am-prod-card, which is one anchor.
   The wrapper takes the card's place as the grid item, so it has to stretch the
   same way or the row goes ragged. */
.am-fav-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.am-fav-card .am-prod-card {
    flex: 1 1 auto;
}

.am-fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Above .am-prod-card__media (which owns the hover shadow) and the Sale badge. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    color: #55555f;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.am-fav-remove:hover,
.am-fav-remove:focus {
    background: var(--am-pink, #ff325a);
    color: #fff;
}

.am-fav-remove:focus-visible {
    outline: 2px solid var(--am-pink, #ff325a);
    outline-offset: 2px;
}

/* Held while the DELETE is in flight — the card is only removed once the server
   confirms, so this is the whole of the feedback in between. */
.am-fav-card.is-removing {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* -------------------------------------------------- Empty / loading ------ */

.am-prod-empty {
    padding: 60px 0 70px;
    text-align: center;
    color: #6f6f71;
}

.am-prod-empty__title {
    margin: 0 0 8px;
    font-weight: 700;
    color: #111113;
}

.am-prod-empty__body {
    margin: 0;
}

.am-prod-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 0;
    color: #99999c;
}

.am-prod-loader[hidden] {
    display: none;
}

/* --------------------------------------------------- Page furniture ------ */

/* Heading used by pages that own a grid but no collection header */
.am-prod-head {
    margin: 28px 0 22px;
    text-align: center;
}

.am-prod-head__title {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #111113;
}

.am-prod-head__count {
    margin: 6px 0 0;
    color: #6f6f71;
}

/* Parent link + sub-category chips on a category page */

.am-subcat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 4px;
}

.am-subcat__chip,
.am-subcat__chip:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border: 1px solid #dcdcdf;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    color: #111113;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.am-subcat__chip:hover,
.am-subcat__chip:focus {
    border-color: #111113;
    background: #111113;
    color: #fff;
    text-decoration: none;
}

/* The "up to parent" chip reads as a step back, not a sibling */
.am-subcat__chip--up {
    background: #f4f4f6;
    border-color: #f4f4f6;
    color: #4d4d50;
}

.am-prod-pager {
    margin-top: 26px;
    text-align: center;
}

.am-prod-pager .pagination {
    margin: 0;
}

/* --------------------------------------------------- Breakpoints --------- */

/* .container widens past 1400px (custom.css) — take a fifth column with it */
@media (min-width: 1400px) {
    .am-prod-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .am-prod-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px 18px;
    }

    .am-prod-head {
        margin: 22px 0 18px;
    }


    .am-subcat {
        margin: 18px 0 4px;
    }

    .am-subcat__chip {
        padding: 6px 13px;
    }
}

@media (max-width: 575px) {
    .am-prod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }



    .am-prod-card__cta {
        height: 32px;
    }

}


/* ==========================================================================
   6. Product details
   was: project/css/shop-pdp.css
   ========================================================================== */

/* ==========================================================================
   Product details page (Artemis)

   Two columns: media rail + composite on the left, a sticky buy box on the right.
   Same .am-* language as the home sections and the product grid.

   Paired with: resources/views/project/shop/product/product-details.blade.php
                resources/views/project/shop/product/includes/*.blade.php

   The variant selectors keep their original markup contract — .selector,
   .available, .{field}-selector and data-{field}_id are what the page JS binds
   to, and every click submits the GET form. This file only restyles them.
   ========================================================================== */

/* ------------------------------------------------------------ Shell ------ */

.am-pdp {
    padding: 26px 0 60px;
}

.am-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 48px;
}

/* ------------------------------------------------------------ Media ------ */

/* Composite on top, print-position thumbnails in a row underneath */
.am-pdp__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.am-pdp__stage {
    position: relative;
    border: 1px solid #ececee;
    border-radius: 14px;
    overflow: hidden;
    background: #fafafa;
}

/* The viewer composite is a fixed-px stack — centre it in the stage */
.am-pdp__stage .texture-container {
    margin: 0 auto;
    max-width: 100%;
}

.am-pdp__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.am-pdp__thumb,
.am-pdp__thumb:visited {
    display: block;
    padding: 4px;
    border: 1px solid #e2e2e5;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .18s ease;
}

.am-pdp__thumb:hover {
    border-color: #b5b5ba;
}

.am-pdp__thumb.is-selected {
    border-color: #111113;
    box-shadow: 0 0 0 1px #111113 inset;
}

.am-pdp__thumb .texture-container {
    /* 100px composite scaled to fill the 66px cell exactly */
    transform: scale(.66);
    transform-origin: top left;
    margin: 0;
}

.am-pdp__thumb-frame {
    /* It is a <span>: without display:block the size and clipping below are ignored,
       the cell is sized by the unscaled 100px composite instead, and the artwork sits
       in the top-left corner of a box half again too big. */
    display: block;
    width: 66px;
    height: 66px;
    overflow: hidden;
}

.am-pdp__thumb-label {
    display: block;
    padding-top: 3px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #6f6f71;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------- Buy box ------ */

.am-pdp__buy {
    position: sticky;
    /* clears the fixed shop header */
    top: 24px;
}

.am-pdp__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 6px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: #111113;
}

.am-pdp__title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.am-pdp__badge {
    flex: 0 0 auto;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.am-pdp__seller {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: #4d4d50;
}

.am-pdp__seller img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

.am-pdp__seller a {
    font-weight: 700;
    color: #111113;
}

.am-pdp__seller a:hover {
    color: var(--artemis-red, #ff325a);
}

/* Price ------------------------------------------------------------------ */

.am-pdp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.am-pdp__price-now {
    font-weight: 800;
    letter-spacing: -.5px;
    color: #111113;
}

.am-pdp__price-was {
    color: #99999c;
    text-decoration: line-through;
}

.am-pdp__price-off {
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 50, 90, .12);
    color: var(--artemis-red, #ff325a);
    font-size: 11.5px;
    font-weight: 700;
}

.am-pdp__price-note {
    margin: 0 0 18px;
    color: #8a8a8d;
}

/* Selector groups -------------------------------------------------------- */

.am-pdp__group {
    margin-bottom: 20px;
}

.am-pdp__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.am-pdp__label {
    font-weight: 700;
    color: #111113;
}

.am-pdp__label-value {
    font-weight: 500;
    color: #6f6f71;
}

.am-pdp__label.has-error {
    color: var(--artemis-red, #ff325a);
}

.am-pdp__link,
.am-pdp__link:visited {
    font-weight: 600;
    color: var(--artemis-red, #ff325a);
    text-decoration: none;
}

.am-pdp__link:hover {
    text-decoration: underline;
    color: var(--artemis-red, #ff325a);
}

.am-pdp__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Colour swatches — circles, dark ring + tick when selected */

.am-pdp__swatch {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .16);
    background-repeat: repeat;
    background-size: 200px 200px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.am-pdp__swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.am-pdp__swatch.selected {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #111113;
}

/* Tick drawn in CSS so it sits above any swatch texture */
.am-pdp__swatch.selected::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 12px;
    margin: -8px 0 0 -4px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
}

/* The custom-colour picker is a native <input type="color"> */
input.am-pdp__swatch {
    padding: 0;
    background-size: cover;
    background-position: center;
    -webkit-appearance: none;
    appearance: none;
}

input.am-pdp__swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.am-pdp__swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
input.am-pdp__swatch::-moz-color-swatch { border: none; border-radius: 50%; }

/* Size / model / printable chips */

.am-pdp__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d9d9dd;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    color: #4d4d50;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.am-pdp__chip:hover {
    border-color: #111113;
    color: #111113;
}

.am-pdp__chip.selected {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

/* Combination not orderable — kept visible so the range stays legible */
.am-pdp__chip.un-available,
.am-pdp__chip.disabled {
    color: #c2c2c6;
    border-color: #ececee;
    background: #fbfbfc;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Print positions are checkboxes styled as chips */
.am-pdp__chip--check {
    position: relative;
    margin: 0;
    font-weight: 600;
}

.am-pdp__chip--check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.am-pdp__chip--check:has(input:checked) {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

/* :has() is unsupported in older browsers — JS mirrors the state onto .selected */
.am-pdp__chip--check.selected {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

.am-pdp__chip--check input:focus-visible + span {
    outline: 2px solid var(--artemis-red, #ff325a);
    outline-offset: 3px;
}

/* Quantity + actions ----------------------------------------------------- */

/* Sits in .am-pdp__actions alongside both CTAs — matches their height */
.am-pdp__qty {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 46px;
    border: 1px solid #d9d9dd;
    border-radius: 8px;
    overflow: hidden;
}

.am-pdp__qty button {
    width: 40px;
    border: none;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    color: #111113;
    cursor: pointer;
    transition: background-color .15s ease;
}

.am-pdp__qty button:hover {
    background: #f4f4f6;
}

.am-pdp__qty input {
    width: 58px;
    padding: 8px 4px;
    border: none;
    border-left: 1px solid #e6e6e9;
    border-right: 1px solid #e6e6e9;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.am-pdp__qty input::-webkit-outer-spin-button,
.am-pdp__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.am-pdp__actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.am-pdp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    border: 1px solid #111113;
    font-weight: 700;
    /* Labels must never wrap to a second line inside a fixed-height button */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* The .add-to-cart-btn class is required by the GA4 dataLayer handler, and
   eshop/css/custom.css gives it width:100% — which as a flex-basis let this button
   eat the whole row and squeeze "Buy Now" until its label wrapped. Reset it here. */
.am-pdp__btn--cart {
    flex: 1 1 auto;
    width: auto;
    background: #fff;
    color: #111113;
}

.am-pdp__btn--cart:hover {
    background: #f4f4f6;
}

.am-pdp__btn--buy {
    flex: 1 1 auto;
    width: auto;
    border-color: var(--artemis-red, #ff325a);
    background: var(--artemis-red, #ff325a);
    color: #fff;
}

.am-pdp__btn--buy:hover {
    background: #e02a4d;
    border-color: #e02a4d;
    color: #fff;
}

/* Shown while the GET form reloads after a selection */
.am-pdp.is-loading .am-pdp__buy {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* Prompt shown until every required attribute is chosen */
.am-pdp__prompt {
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px dashed #d9d9dd;
    border-radius: 8px;
    line-height: 1.5;
    color: #4d4d50;
}

.am-pdp__prompt b {
    color: #111113;
    text-transform: capitalize;
}

.am-pdp__reset {
    display: inline-block;
    margin-bottom: 14px;
    color: #6f6f71;
    text-decoration: underline;
}

.am-pdp__reset:hover {
    color: var(--artemis-red, #ff325a);
}

.am-pdp__alert {
    padding: 13px 15px;
    border-radius: 8px;
    background: rgba(255, 50, 90, .1);
    color: #b3213e;
}

/* ------------------------------------------------------- Lower page ------ */

.am-pdp__section {
    margin-top: 54px;
}

.am-pdp__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.am-pdp__section-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111113;
}

/* Also-available-on: a horizontal rail of the shared product cards */
.am-pdp__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}

.am-pdp__rail > * {
    scroll-snap-align: start;
}

/* "You may like": a 6-up grid rather than a rail — this is a browse row, not a
   variant row, so it should read like the listing page. */
.am-pdp__suggest {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 20px;
}

/* Description blocks, one per source of copy */
.am-pdp__desc + .am-pdp__desc {
    margin-top: 26px;
}

.am-pdp__desc-title {
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #6f6f71;
}

.am-pdp__desc-body {
    line-height: 1.7;
    color: #4d4d50;
}

.am-pdp__desc-body :last-child {
    margin-bottom: 0;
}

/* Description HTML is authored in the admin editor, so it carries whatever inline
   sizing the author left behind — category 74 ships style="width:700px;height:700px".
   An inline width beats a stylesheet width, so cap with max-width and force height
   back to auto, or the image overflows the column and distorts on narrow screens. */
.am-pdp__desc-body img {
    max-width: 100%;
    height: auto !important;
    border-radius: 8px;
}

/* --------------------------------------------------- Breakpoints --------- */

@media (max-width: 1199px) {
    .am-pdp__grid {
        gap: 34px;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .am-pdp__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* Sticky only makes sense beside the media column */
    .am-pdp__buy {
        position: static;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .am-pdp__section {
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .am-pdp {
        padding: 16px 0 44px;
    }




    .am-pdp__swatch {
        width: 34px;
        height: 34px;
    }

    .am-pdp__chip {
        min-width: 46px;
        height: 36px;
        padding: 0 12px;
    }

    /* Three across is too tight on a phone: quantity keeps its own line,
       then each CTA takes a full-width row. */
    .am-pdp__qty {
        flex: 0 0 auto;
    }

    .am-pdp__btn {
        flex: 1 1 100%;
        width: 100%;
    }


    .am-pdp__rail {
        grid-auto-columns: minmax(150px, 1fr);
        gap: 14px;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }
}


/* ==========================================================================
   7. Footer
   was: project/css/shop-footer.css
   ========================================================================== */

/* The <footer> itself carries .f-14 and the whole subtree inherits it, so the
   link rows, contact list and column toggles need no class of their own — their
   old 13.5px rules are gone rather than restated. Only .am-footer__copy differs,
   on .f-13, because it should stay a step below everything else.

   Off the scale, deliberately: .am-footer__contact i (14) and .am-footer__social a
   (16/15) size Font Awesome glyphs, not text, and .am-footer__coltitle is an
   explicit `inherit` so headings track whatever the footer root is set to. */

/* ==========================================================================
   Shop footer (Artemis)

   Mobile-first. Below 768px the three link columns become accordions, the
   contact rows and social icons get 44px tap targets, and the bottom bar
   stacks. Above it, a four-column grid: brand + three link lists.

   Scoped under .am-* so it does not collide with the eshop template CSS —
   note custom.css sets `color: white !important` on every a/p/li under
   `.footer`, which is why the wrapper no longer carries that class.

   Width comes from Bootstrap's .container in the markup (custom.css widens it
   to 1360px above 1400px viewport, 1560px above 1600px); the footer owns
   vertical rhythm only.

   Paired with:
     resources/views/project/layouts/shop/includes/sections/footer.blade.php
   ========================================================================== */

.am-footer {
    --am-footer-bg: #141416;
    --am-footer-bar: #0d0d0e;
    --am-footer-text: #b9b9bd;
    --am-footer-strong: #fff;
    --am-footer-line: rgba(255, 255, 255, .1);

    background: var(--am-footer-bg);
    color: var(--am-footer-text);
    line-height: 1.6;
}

/* ------------------------------------------------------------- Base ------ */

.am-footer a,
.am-footer a:visited {
    color: var(--am-footer-text);
    text-decoration: none;
    transition: color .18s ease;
}

.am-footer a:hover,
.am-footer a:focus {
    color: var(--am-footer-strong);
}

.am-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Keyboard focus has to stay visible on a dark ground */
.am-footer a:focus-visible,
.am-footer button:focus-visible {
    outline: 2px solid var(--artemis-red, #ff325a);
    outline-offset: 3px;
    border-radius: 3px;
}

/* -------------------------------------------------- Layout (mobile) ------ */

/* Single column by default; the grid arrives at 768px. */
.am-footer__top {
    padding-top: 34px;
    padding-bottom: 8px;
}

/* -------------------------------------------------------- Brand ---------- */

.am-footer__logo {
    display: inline-block;
    margin-bottom: 18px;
}

.am-footer__logo img {
    display: block;
    width: auto;
    height: 38px;
    max-width: 100%;
}

.am-footer__contact {
    margin-bottom: 18px;
}

.am-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
}

.am-footer__contact i {
    flex: 0 0 16px;
    margin-top: 4px;
    font-size: 14px;
    text-align: center;
    color: var(--artemis-red, #ff325a);
}

/* Phone and email are tapped, not read — give them a real target */
.am-footer__contact a {
    display: inline-block;
    min-height: 30px;
    word-break: break-word;
}

/* -------------------------------------------------------- Social --------- */

.am-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.am-footer__social a,
.am-footer__social a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--am-footer-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--am-footer-strong);
    font-size: 16px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.am-footer__social a:hover,
.am-footer__social a:focus {
    background: var(--artemis-red, #ff325a);
    border-color: var(--artemis-red, #ff325a);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------------------------------------------- Link columns (mobile) ---- */

/* Below 768px each column is an accordion row with a full-width divider. */
.am-footer__col {
    border-top: 1px solid var(--am-footer-line);
}

.am-footer__coltitle {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.am-footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--artemis-red, #ff325a);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.am-footer__caret {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-25%, -25%);
    transition: transform .2s ease;
}

.am-footer__col.is-open .am-footer__caret {
    transform: rotate(225deg) translate(-15%, -15%);
}

/* Collapsed by default on a phone. `display` rather than max-height so the
   links are not tab-reachable while hidden. */
.am-footer__links {
    display: none;
    padding-bottom: 10px;
}

.am-footer__col.is-open .am-footer__links {
    display: block;
}

.am-footer__links a {
    display: block;
    padding: 9px 0;      /* ~40px rows — comfortable to tap, still compact */
}

/* ------------------------------------------------------ Bottom bar ------- */

.am-footer__bottom {
    margin-top: 22px;
    border-top: 1px solid var(--am-footer-line);
    background: var(--am-footer-bar);
}

.am-footer__bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center;
}

.am-footer__copy {
    margin: 0;
    color: #8b8b90;
}

.am-footer__copy a {
    color: #8b8b90;
}

.am-footer__payments {
    display: block;
    width: auto;
    max-width: 100%;
    height: 22px;
    opacity: .85;
}

/* --------------------------------------------------------- >= 768px ------ */

@media (min-width: 768px) {
    .am-footer__top {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
        gap: 0 32px;
        padding-top: 52px;
        padding-bottom: 36px;
    }

    .am-footer__brand {
        padding-right: 24px;
    }

    .am-footer__social {
        margin-bottom: 0;
    }

    /* The accordion chrome is mobile-only: no divider, no caret, always open. */
    .am-footer__col {
        border-top: 0;
    }

    .am-footer__toggle {
        min-height: 0;
        margin-bottom: 14px;
        cursor: default;
        pointer-events: none;
    }

    .am-footer__caret {
        display: none;
    }

    .am-footer__links {
        display: block;
        padding-bottom: 0;
    }

    .am-footer__links a {
        padding: 5px 0;
    }

    .am-footer__bottom {
        margin-top: 0;
    }

    .am-footer__bottom-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }
}

/* At tablet width four columns are cramped — brand spans the full row. */
@media (min-width: 768px) and (max-width: 991px) {
    .am-footer__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 28px;
    }

    .am-footer__brand {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 4px;
    }
}

/* ------------------------------------------------------- Small phones ---- */

@media (max-width: 400px) {
    .am-footer__top {
        padding-top: 26px;
    }

    .am-footer__logo img {
        height: 32px;
    }

    .am-footer__social a {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .am-footer__payments {
        height: 18px;
    }
}


/* ==========================================================================
   8. Chat widget
   was: project/css/shop-chat-widget.css
   ========================================================================== */

/* ==========================================================================
   Floating chat widget (Artemis)

   A launcher pinned bottom-left that expands into the direct-chat channels
   (WhatsApp, Messenger). Bottom-LEFT because the Facebook customer-chat plugin
   and Zoho SalesIQ both take the bottom-right corner on dev and production.

   z-index sits below Bootstrap's modal layer (1050) so the delete/confirm/message
   modals in the shop layout still cover it.

   Paired with:
     resources/views/project/layouts/shop/includes/sections/chat-widget.blade.php
   ========================================================================== */

.am-chat {
    --am-chat-size: 56px;
    --am-chat-gap: 20px;

    position: fixed;
    left: var(--am-chat-gap);
    bottom: var(--am-chat-gap);
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* ----------------------------------------------------------- Launcher ---- */

.am-chat__launcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--am-chat-size);
    height: var(--am-chat-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: transform .18s ease, background-color .18s ease;
}

.am-chat__launcher:hover,
.am-chat__launcher:focus {
    background: #e02a4d;
    color: #fff;
    transform: scale(1.05);
}

.am-chat__launcher:focus-visible {
    outline: 3px solid #111113;
    outline-offset: 3px;
}

/* Swap the bubble for a cross while the panel is open */
.am-chat__launcher-close {
    display: none;
    font-size: 30px;
    font-weight: 300;
}

.am-chat.is-open .am-chat__launcher-open {
    display: none;
}

.am-chat.is-open .am-chat__launcher-close {
    display: block;
}

.am-chat.is-open .am-chat__launcher {
    background: #111113;
}

/* -------------------------------------------------------- Channels ------- */

.am-chat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    /* Collapsed. `visibility` rather than `display` so the entry can animate, and
       so the links are not reachable by keyboard while hidden. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.am-chat.is-open .am-chat__list {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.am-chat__link,
.am-chat__link:visited {
    display: flex;
    flex-direction: row-reverse;   /* icon nearest the launcher edge, label beside it */
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: #fff;
    color: #111113;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.am-chat__link:hover,
.am-chat__link:focus {
    color: #111113;
    transform: translateX(3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .24);
}

.am-chat__link:focus-visible {
    outline: 3px solid var(--artemis-red, #ff325a);
    outline-offset: 2px;
}

.am-chat__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.am-chat__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.am-chat__label {
    display: block;
}

/* ------------------------------------------------------- Breakpoints ----- */

@media (max-width: 767px) {
    .am-chat {
        --am-chat-size: 52px;
        --am-chat-gap: 14px;
    }

    .am-chat__link {
        font-size: 13px;
        padding: 5px 12px 5px 5px;
    }

    .am-chat__icon {
        width: 30px;
        height: 30px;
    }
}

/* Very narrow phones: the labels would run past the viewport, so the channels
   become plain icon buttons. Their accessible name comes from the label text,
   which is moved off-screen rather than removed. */
@media (max-width: 400px) {
    .am-chat__link {
        padding: 6px;
    }

    .am-chat__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .am-chat__list,
    .am-chat__link,
    .am-chat__launcher {
        transition: none;
    }

    .am-chat__link:hover,
    .am-chat__link:focus,
    .am-chat__launcher:hover,
    .am-chat__launcher:focus {
        transform: none;
    }
}


/* ==========================================================================
   9. Cart
   new with the cart rework — no old_ counterpart in CSS
   ========================================================================== */

/* Only rendered when config('shop.new_checkout') is on; the preserved
   old_index.blade.php still carries its own inline <style>.

   The old page was a desktop <table> forced through mobile with ~90 lines of
   !important overrides. This is a CSS Grid list: labelled rows on desktop,
   stacked cards under 768px, no !important anywhere.

   Text sizes come from the .f-* scale in project.css, set on the markup.
   Paired with resources/views/project/shop/cart/index-new.blade.php. */

.am-cart {
    padding: 28px 0 56px;
}

.am-cart__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 32px;
}

/* Row template is declared once and shared by the head and every row, so the
   labels cannot drift out of alignment with the cells beneath them. */
.am-cart__head,
.am-cart__row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 110px 132px 110px 110px 72px;
    align-items: center;
    gap: 16px;
}

.am-cart__head {
    padding: 0 12px 10px;
    border-bottom: 1px solid #e6e6e9;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6f6f71;
}

.am-cart__row {
    padding: 16px 12px;
    border-bottom: 1px solid #f0f0f2;
}

.am-cart__num {
    text-align: center;
}

.am-cart__media img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.am-cart__desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.am-cart__name {
    font-weight: 600;
    color: #111113;
}

.am-cart__meta {
    color: #6f6f71;
    word-break: break-word;
}

.am-cart__strong {
    font-weight: 700;
    color: #111113;
}

/* Quantity stepper — carried over from the old page's inline style, unchanged
   apart from living in a stylesheet. The .qty-* class names are JS hooks. */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.qty-stepper .qty-btn {
    width: 32px;
    border: none;
    background: #f5f5f5;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

.qty-stepper .qty-btn:hover {
    background: #ececec;
}

.qty-stepper .qty-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.qty-stepper .qty-input {
    width: 48px;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    -moz-appearance: textfield;
    padding: 5px 2px;
}

.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-saving {
    display: none;
    color: #999;
    margin-left: 6px;
}

/* Set by the remove flow while the DELETE is in flight. */
.cart-row-removing {
    opacity: .45;
    transition: opacity .2s ease;
}

.am-cart__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* 36px targets: these are the two smallest controls on a money page. */
.am-cart__icon,
.am-cart__icon:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e0e0e3;
    border-radius: 6px;
    background: #fff;
    color: #6f6f71;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.am-cart__icon:hover {
    border-color: #111113;
    color: #111113;
}

/* Summary */

.am-cart__summary {
    position: sticky;
    top: 24px;
    padding: 22px;
    border: 1px solid #e6e6e9;
    border-radius: 14px;
    background: #fafafa;
}

.am-cart__summary-title {
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111113;
}

.am-cart__totals {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.am-cart__totals li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    color: #4d4d50;
}

.am-cart__totals-grand {
    border-top: 1px solid #e6e6e9;
    margin-top: 4px;
    padding-top: 12px;
    font-weight: 700;
    color: #111113;
}

/* Summary CTAs — hierarchy only. The hover and focus defects these used to work around
   are fixed on the shared .am-btn-dark / .am-btn-outline rules now, so nothing here
   redefines them; what is left is genuinely cart-specific sizing and emphasis. */

.am-cart__checkout,
.am-cart__continue {
    width: 100%;
}

/* Primary: taller and heavier than the shared button, and lifted off the card so it reads
   as the action rather than one of two equal options. */
.am-cart__checkout {
    height: 56px;
    font-weight: 600;
    letter-spacing: -.2px;
    box-shadow: 0 2px 10px rgba(17, 17, 19, .18);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.am-cart__checkout:hover {
    box-shadow: 0 4px 16px rgba(17, 17, 19, .26);
    transform: translateY(-1px);
}

.am-cart__checkout:active {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(17, 17, 19, .2);
}

/* Secondary: shorter, lighter border, muted label. The caret is the only icon here, so it
   carries the "back" meaning; gap keeps it off the text. */
.am-cart__continue {
    height: 46px;
    margin-top: 10px;
    gap: 8px;
    border-color: #dcdce0;
    color: #4d4d50;
    background: transparent;
}

/* Only the muted label needs restoring on hover — the border and the wash come from
   .am-btn-outline:hover. */
.am-cart__continue:hover {
    color: #111113;
}

.am-cart__continue .fa {
    font-size: .9em;
    transition: transform .18s ease;
}

.am-cart__continue:hover .fa {
    transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .am-cart__checkout,
    .am-cart__checkout:hover,
    .am-cart__continue .fa,
    .am-cart__continue:hover .fa {
        transform: none;
        transition: none;
    }
}

/* The remove-item confirm dialog is .am-modal — section 14, shared with checkout. */

/* Empty state */

.am-cart__empty {
    padding: 64px 0 72px;
    text-align: center;
}

.am-cart__empty-title {
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #111113;
}

.am-cart__empty-body {
    margin: 0 0 24px;
    color: #4d4d50;
}

@media (max-width: 991px) {
    /* Summary drops below the rows and stops sticking. */
    .am-cart__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .am-cart__summary {
        position: static;
    }
}

@media (max-width: 767px) {
    /* Each row becomes a card. The column labels are hidden, so every numeric
       cell grows its own inline label from data-label — this is what the old
       page did with td::before and a wall of !important. */
    .am-cart__head {
        display: none;
    }

    .am-cart__row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 6px 12px;
        padding: 14px 0;
    }

    .am-cart__media {
        grid-row: span 2;
    }

    .am-cart__cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        grid-column: 2;
        text-align: left;
    }

    .am-cart__cell::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #8a8a8e;
    }

    .am-cart__actions {
        grid-column: 2;
        justify-content: flex-start;
        padding-top: 4px;
    }
}


/* ==========================================================================
   10. Checkout
   new with the checkout rework — no old_ counterpart in CSS
   ========================================================================== */

/* Only rendered when config('shop.new_checkout') is on; the preserved
   old_index.blade.php still carries its own inline <style>.

   PART-BOOTSTRAP BY NECESSITY. The form fields come from the shared form.*
   partials (included by 163 views across the app), so they keep emitting
   .form-control inside col-md-* columns and are not restyled here. What this
   section owns is everything around them: the page shell, the section blocks,
   the order summary, the coupon row and the actions.

   Paired with resources/views/project/shop/checkout/index-new.blade.php. */

.am-checkout {
    padding: 28px 0 56px;
}

.am-checkout__title {
    margin: 0 0 24px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #111113;
}

/* Equal halves: form left, order summary right. Was `minmax(0, 1fr) 360px`, i.e. a fixed
   360px rail with the form taking everything left over.

   Both tracks are minmax(0, 1fr) rather than 1fr 1fr — a bare 1fr floors at min-content,
   so the long variant names and the customer's address lines could push a column past 50%
   and unbalance the split. minmax(0, …) lets them wrap instead.

   Below 991px this collapses to one column (see the media query further down), so the
   50/50 split only applies where there is room for it. */
.am-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
}

.am-checkout__block {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f2;
}

.am-checkout__block:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.am-checkout__legend {
    margin: 0 0 14px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: #111113;
}

.am-checkout__legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.am-checkout__legend-row .am-checkout__legend {
    margin-bottom: 14px;
}

/* Checkbox rows — label wraps the input so the whole row is a hit target. */
.am-checkout__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-weight: 400;
    color: #4d4d50;
    cursor: pointer;
}

.am-checkout__check input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}

/* Summary */

.am-checkout__summary {
    position: sticky;
    top: 24px;
    padding: 22px;
    border: 1px solid #e6e6e9;
    border-radius: 14px;
    background: #fafafa;
}

.am-checkout__summary-title {
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111113;
}

.am-checkout__items {
    margin-bottom: 18px;
    max-height: 320px;
    overflow-y: auto;
}

/* Four columns: thumb, description, line total, remove. The remove button is the
   fourth and is why this is not the three-column grid it used to be. */
.am-checkout__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ececef;
}

/* Dimmed while its DELETE is in flight — same cue as .cart-row-removing. */
.am-checkout__item.is-removing {
    opacity: .45;
    transition: opacity .2s ease;
}

/* Smaller than the cart page's 36px control: this sits in a dense summary column,
   next to the line total, and is a secondary action on a page whose primary action
   is paying. Still a 28px target with the icon centred. */
.am-checkout__item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: #9a9a9d;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.am-checkout__item-remove:hover,
.am-checkout__item-remove:focus-visible {
    border-color: #c0392b;
    color: #c0392b;
}

.am-checkout__item:last-child {
    border-bottom: none;
}

.am-checkout__item-media img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.am-checkout__item-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.am-checkout__item-name {
    font-weight: 600;
    color: #111113;
}

.am-checkout__item-meta {
    color: #6f6f71;
    word-break: break-word;
}

.am-checkout__item-total {
    font-weight: 700;
    color: #111113;
    white-space: nowrap;
}

.am-checkout__empty {
    margin: 0;
    padding: 12px 0;
    color: #6f6f71;
}

.am-checkout__totals {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e6e6e9;
}

.am-checkout__totals li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    color: #4d4d50;
}

.am-checkout__totals-value {
    text-align: right;
}

.am-checkout__totals-grand {
    border-top: 1px solid #e6e6e9;
    margin-top: 4px;
    padding-top: 12px;
    font-weight: 700;
    color: #111113;
}


/* form.hidden wraps its input in a <div class="col-md-12">. Inside these flex
   rows that wrapper is a flex item — full width, with Bootstrap gutter padding —
   so it must be hidden as a DIV, not just as an input: hiding only the input
   leaves the empty column behind and the row opens a gap. The inputs stay in the
   DOM and keep working; they are what refreshSummary() writes to. */
.am-checkout__totals li > div {
    display: none;
}

/* Same wrapper problem for the standalone hidden fields elsewhere in the form
   (user_id). :has() is the general form; the explicit rule above is kept because
   it does not depend on it. */
.am-checkout__fields > div:has(> input[type="hidden"]),
.am-checkout form > div:has(> input[type="hidden"]) {
    display: none;
}

/* form.checkbox brings its own .form-group mb-3; inside the terms label that
   margin pushes the text off the checkbox baseline. */
.am-checkout__terms .form-group,
.am-checkout__check .form-group {
    margin-bottom: 0;
}

/* Field alignment is fixed globally now — `.row > .form-group` in mainframe.css,
   directly below the legacy `.form-group { padding: 0 30px 0 0 }` it corrects. The
   checkout-scoped copy that used to sit here was removed as a duplicate. Field
   borders are unified shop-wide near the top of this file (Base, form controls). */

/* Coupon */

.am-checkout__coupon {
    margin-bottom: 18px;
}

.am-checkout__coupon-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #111113;
}

.am-checkout__coupon-row {
    display: flex;
    gap: 8px;
}

.am-checkout__coupon-row .coupon-code-input {
    flex: 1 1 auto;
    min-width: 0;
}

.am-checkout__coupon-row .am-btn-dark,
.am-checkout__coupon-row .am-btn-outline {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
}

.coupon-message {
    display: block;
    margin-top: 6px;
}

/* Terms + actions */

.am-checkout__terms {
    align-items: flex-start;
    margin: 0 0 16px;
}

.am-checkout__terms a {
    color: #111113;
    text-decoration: underline;
}

.am-checkout__submit {
    width: 100%;
}

.am-checkout__links {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.am-checkout__links .am-btn-outline {
    flex: 1 1 0;
    height: 40px;
    padding: 0 12px;
    gap: 6px;
}

.am-checkout__changes {
    margin: 0;
    padding-left: 18px;
}

/* The summary card is half the grid now, so these rows can run ~580px wide. They are
   space-between, which at that width leaves a label and its number at opposite ends with a
   long gap between — the eye loses the line. Capped and pushed to the right edge, where the
   numbers already align. The ITEM rows are deliberately NOT capped; they use the extra
   width for long variant names.

   Placed after the base .am-checkout__totals / .am-checkout__coupon rules on purpose: same
   specificity, so this only wins on order. Keep it below them. */
@media (min-width: 992px) {
    .am-checkout__totals,
    .am-checkout__coupon {
        max-width: 420px;
        margin-left: auto;
    }
}

@media (max-width: 991px) {
    /* Summary drops below the form and stops sticking. */
    .am-checkout__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .am-checkout__summary {
        position: static;
    }
}

@media (max-width: 575px) {
    .am-checkout__item {
        grid-template-columns: 48px minmax(0, 1fr) auto auto;
        gap: 10px;
    }

    .am-checkout__coupon-row {
        flex-wrap: wrap;
    }

    .am-checkout__coupon-row .coupon-code-input {
        flex: 1 1 100%;
    }

    .am-checkout__links {
        flex-direction: column;
    }
}


/* ==========================================================================
   11. Order confirmed
   guest confirmation page — shop/checkout/order-confirmed
   ========================================================================== */

/* Replaces 37 inline style="" attributes on the old page. Same visual intent —
   tinted band, white cards, red accent — but on the shared tokens: --artemis-red
   rather than a hardcoded #e8192c, and the .f-* scale rather than rem literals. */

.am-oc {
    padding: 40px 0 64px;
    background: #f5f5f5;
    min-height: 60vh;
}

.am-oc__head {
    margin-bottom: 28px;
    text-align: center;
}

.am-oc__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 26px;
}

.am-oc__title {
    margin: 14px 0 4px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #111113;
}

.am-oc__lead {
    margin: 0;
    color: #4d4d50;
}

/* Items get the wider column; delivery details are a short fixed list. Collapses
   to one column below 991px, same breakpoint the cart and checkout use. */
.am-oc__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.am-oc__card {
    padding: 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .07);
}

.am-oc__card-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--artemis-red, #ff325a);
    font-weight: 700;
    color: #111113;
}

/* Item rows */

.am-oc__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
}

.am-oc__item-media {
    border-radius: 4px;
    overflow: hidden;
}

.am-oc__item-desc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.am-oc__item-name {
    font-weight: 600;
    color: #111113;
}

.am-oc__item-meta {
    color: #6f6f71;
    word-break: break-word;
}

.am-oc__item-total {
    font-weight: 600;
    color: #111113;
    white-space: nowrap;
}

.am-oc__empty {
    margin: 0;
    color: #6f6f71;
}

/* Totals */

.am-oc__totals {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.am-oc__totals li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    color: #4d4d50;
}

.am-oc__totals-save {
    color: #28a745;
}

.am-oc__totals-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid #eee;
    font-weight: 700;
    color: #111113;
}

.am-oc__totals-grand span:last-child {
    color: var(--artemis-red, #ff325a);
}

/* Delivery details — a <dl> laid out as a two-column key/value table, replacing the
   <table> the old page used for what is not tabular data. */

.am-oc__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.am-oc__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 10px;
    margin: 0;
}

.am-oc__meta dt {
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

.am-oc__meta dd {
    margin: 0;
    color: #111113;
    overflow-wrap: anywhere;
}

.am-oc__continue {
    width: 100%;
}

@media (max-width: 991px) {
    .am-oc__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .am-oc {
        padding: 24px 0 40px;
    }

    .am-oc__card {
        padding: 18px 16px;
    }

    /* Thumbnail and price keep their columns; the description wraps under them
       rather than being squeezed to a few characters. */
    .am-oc__item {
        gap: 10px;
    }
}

/* --- Order detail additions (shop/orders/show) -------------------------------
   The page shares every block above with order-confirmed; these are the parts it
   adds — a plain header instead of the success tick, the outstanding-payment
   banner, and the invoice download list. */

/* No success tick on this page, so the header does not need the tick's spacing. */
.am-oc__head--plain {
    text-align: left;
}

.am-oc__status {
    font-weight: 600;
    color: #111113;
}

/* Outstanding payment. Full width above the grid: when money is owed this is the
   reason the customer opened the page, so it should not sit in a sidebar. */
.am-oc__due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border: 1px solid var(--artemis-red, #ff325a);
    border-radius: 8px;
    background: #fff;
}

.am-oc__due-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.am-oc__due-text strong {
    color: var(--artemis-red, #ff325a);
}

.am-oc__due-text span {
    color: #4d4d50;
}

.am-oc__due-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Courier tracking */

/* Outlined like the Pay now band, in ink rather than red: it is the card the eye
   should land on once an order ships, but nothing here is wrong or owed. The base
   card carries a shadow and no border, so the border is stated in full here. */
.am-oc__card--track {
    border: 1px solid #111113;
}

/* A consignment id is a machine string a customer reads out to support — mono, so
   the 0/O and 1/I in it can be told apart, and selectable in one click. */
.am-oc__consignment {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
    user-select: all;
}

.am-oc__track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}

/* Invoice downloads */

.am-oc__docs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.am-oc__docs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f2f2;
    color: #4d4d50;
}

.am-oc__docs li:last-child {
    border-bottom: none;
}

.am-oc__doc-link,
.am-oc__doc-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #111113;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.am-oc__doc-link:hover {
    color: var(--artemis-red, #ff325a);
    border-bottom-color: currentColor;
}

@media (max-width: 575px) {
    .am-oc__due {
        padding: 16px;
    }

    /* Stacked, the button reads better full width than floated right. */
    .am-oc__due-actions,
    .am-oc__due-actions .am-btn-dark {
        width: 100%;
    }
}


/* ==========================================================================
   12. Shop-by page banner + CTA row
   shop/shop-by/partials/hero-banner, shop/shop-by/partials/cta-buttons
   ==========================================================================

   One image and nothing else — no copy column, no buttons, no overlay. The
   banner is art-directed, so the uploaded artwork carries any text it needs
   and this file must not crop or letterbox it: the image keeps its natural
   aspect ratio at every width (width:100% / height:auto), which is why there
   is no fixed height and no object-fit here.

   Sized like a single home hero slide, deliberately: width comes from
   Bootstrap's .container in the markup (custom.css widens it to 1360px above
   1400px viewport, 1560px above 1600px) so the banner lines up with the page
   content under it, and the frame reuses --am-hero-radius from section 3 so
   the two banners cannot drift apart. Set that token there, not here.

   The .am-shopby-cta* rules below are NOT part of the banner any more. They
   belong to partials/cta-buttons, which the customize page still includes
   above its category grid, and are kept in this section because they read the
   same content record. Do not delete them with the banner's own rules. */


.am-shopby-hero {
    /* Horizontal width comes from Bootstrap .container in the markup. Tighter
       bottom padding than .am-hero because no dots sit under the artwork. */
    padding: 22px 0 20px;
}

.am-shopby-hero__frame {
    border-radius: var(--am-hero-radius, 16px);
    overflow: hidden;
    background: #f4f4f5;
    box-shadow: 0 1px 2px rgba(17, 17, 19, .06), 0 10px 30px rgba(17, 17, 19, .07);
}

.am-shopby-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Not hero-scoped: the same row is included further down a page (customize, above
   the category grid) off the banner's own content record. */
.am-shopby-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.am-shopby-cta-row--center {
    justify-content: center;
}

/* Shaped like .am-promo__cta so the storefront keeps one button, but its own
   rule — .am-promo__cta is shared with four home sections and bending it here
   would move all of them. */
.am-shopby-cta,
.am-shopby-cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    border: 1px solid var(--artemis-red, #ff325a);
    border-radius: 8px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.am-shopby-cta:hover,
.am-shopby-cta:focus {
    /* Darkened with a translucent layer rather than a fixed hex: an admin's
       cta-color lands in an inline background-color that a hex swap here would
       lose to, so the hover would stop working the moment one is set. */
    background-image: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16));
    color: #fff;
    text-decoration: none;
}

/* Second CTA, when no admin colour promotes it back to solid. */
.am-shopby-cta--ghost,
.am-shopby-cta--ghost:visited {
    background: transparent;
    border-color: #111113;
    color: #111113;
}

.am-shopby-cta--ghost:hover,
.am-shopby-cta--ghost:focus {
    background-image: none;
    background-color: #111113;
    color: #fff;
}

/* --------------------------------------------------- Breakpoints --------- */

/* The image itself needs none — a natural-ratio image inside .container scales
   on its own, and the corner radius tracks --am-hero-radius, which section 3
   already steps down at these same widths. Only the vertical rhythm changes,
   matching .am-hero step for step. */

@media (max-width: 991px) {
    .am-shopby-hero {
        padding: 16px 0 16px;
    }
}

@media (max-width: 767px) {
    .am-shopby-hero {
        padding: 10px 0 12px;
    }

    .am-shopby-cta-row {
        margin-top: 18px;
        gap: 10px;
    }

    /* Two buttons side by side on a phone row leaves both too narrow to read
       and too close to mis-tap, so each takes its own full-width row. */
    .am-shopby-cta {
        width: 100%;
        height: 48px;
    }
}

/* ==========================================================================
   13. Customize page
   shop/shop-by/shop-by-customize + shop/shop-by/partials/customize-*
   ==========================================================================

   Four sections on one page: benefits row, how-to-customize steps, product
   grid, testimonials. All four are content-driven and each renders nothing at
   all when its record is empty, so the rhythm below has to survive any of them
   being absent — vertical spacing therefore lives on the sections themselves
   and never on a :first-child/:last-child of the page wrapper.

   Do NOT add font-size here — the headings, labels and bodies carry .f-30,
   .f-20, .f-14 and .f-12 from the scale in project.css. shop.css loads after
   project.css, so a font-size on these single-class rules would win on source
   order and silently make the utility inert.

   Nine images (six benefit icons, three step illustrations) are NOT in the
   repo — they are admin-supplied through `item-N-image` / `step-N-image` parts.
   A slot with neither a part nor a slug-named upload degrades to .am-cust-ph, a
   dashed placeholder tile, so a half-filled record reads as unfinished-on-
   purpose rather than broken. Nothing here changes when art lands or is
   cleared — the blades add or drop the class. */

.am-customize {
    padding-bottom: 20px;
}

/* Shared section heading. Centred on every section in this design. */
.am-cust__heading {
    margin: 0 0 28px;
    color: #111113;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* Placeholder for an image slot with no upload yet.

   Applied to the WRAPPER, which always exists, rather than swapped in for the
   <img> — the tile keeps its size either way, so attaching artwork later does
   not reflow the page.

   It is a class the blade adds, NOT :empty. Blade leaves the newline and
   indentation inside the span as a text node, so :empty would never match and
   the placeholder would silently never draw. */
.am-cust-ph {
    border: 1px dashed #d7d7de;
    border-radius: 12px;
    background: repeating-linear-gradient(
        135deg,
        #fafafc,
        #fafafc 7px,
        #f2f2f6 7px,
        #f2f2f6 14px
    );
}

/* ------------------------------------------------------- Benefits -------- */

.am-cust-features {
    padding: 34px 0 10px;
}

.am-cust-features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Six across, and it stays six until it genuinely cannot: auto-fit would
       collapse to five and leave one item orphaned on its own row. The counts
       below step 6 -> 3 -> 2 so every row stays full at every width. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 26px 14px;
}

.am-cust-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* The artwork these hold is six unrelated PNGs of differing weight, tone and
   trim. A shared disc is what makes them read as one set — without it the row
   is six drawings floating at six apparent sizes. */
.am-cust-features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #f5f5f9;
    transition: background-color .25s ease, transform .25s ease;
}

/* Neutral on hover too: the icons carry their own colour, and a tinted ground
   competes with them. The lift is the whole of the feedback. */
.am-cust-features__item:hover .am-cust-features__icon {
    background-color: #ececf2;
    transform: translateY(-3px);
}

/* Inset inside the disc rather than filling it, so the drawing keeps air around
   it however tightly its own file is cropped. */
.am-cust-features__icon img {
    max-width: 44px;
    max-height: 44px;
    /* contain, not cover: these are line-art icons with their own margins and a
       cover crop would clip the drawing. */
    object-fit: contain;
}

/* The disc above sets `background` and is declared later than .am-cust-ph, so
   an unfilled slot needs its placeholder restated here or it silently loses. */
.am-cust-features__icon.am-cust-ph {
    border-radius: 50%;
    background: repeating-linear-gradient(
        135deg,
        #fafafc,
        #fafafc 7px,
        #f2f2f6 7px,
        #f2f2f6 14px
    );
}

@media (prefers-reduced-motion: reduce) {
    .am-cust-features__icon {
        transition: none;
    }

    .am-cust-features__item:hover .am-cust-features__icon {
        transform: none;
    }
}

.am-cust-features__label {
    max-width: 15ch;
    color: #2a2a31;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------------------------------------------------------- Steps -------- */

.am-cust-steps {
    padding: 42px 0 10px;

    /* The three numbers that place the connecting rule. The rule has to land on
       the centre of the number discs, and its offset is therefore the height of
       the illustration above them plus the gap plus half a disc — so all three
       are stated once here and the offset is calc()'d from them rather than
       being a magic number that silently stops matching when one is edited.

       This is also why the illustration has a stated HEIGHT and not an
       aspect-ratio: a ratio makes the disc's offset depend on the column width,
       which CSS cannot feed back into a top: calc(). */
    --am-cust-step-media-h: 180px;
    --am-cust-step-media-gap: 18px;
    --am-cust-step-disc: 30px;
}

.am-cust-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 24px;
}

.am-cust-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 8px;
}

.am-cust-steps__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    height: var(--am-cust-step-media-h);
    margin-bottom: var(--am-cust-step-media-gap);
}

.am-cust-steps__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* The connecting rule.

   Drawn per item rather than once across the list so the first and last
   segments can stop at their own disc instead of running off the row, and a
   pseudo-element so it stays out of the accessibility tree entirely.

   The offset is calc()'d from the three custom properties on .am-cust-steps so
   it tracks the illustration height instead of being a magic number: media
   height + gap + half a disc puts it exactly through the discs' centres. */
.am-cust-steps__item::before {
    content: "";
    position: absolute;
    top: calc(
        var(--am-cust-step-media-h) +
        var(--am-cust-step-media-gap) +
        (var(--am-cust-step-disc) / 2)
    );
    left: 0;
    right: 0;
    height: 1px;
    background: var(--am-pink, #ff325a);
}

.am-cust-steps__item:first-child::before {
    left: 50%;
}

.am-cust-steps__item:last-child::before {
    right: 50%;
}

/* One step: there is nothing to connect. */
.am-cust-steps__item:only-child::before {
    display: none;
}

.am-cust-steps__number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    border-radius: 50%;
    /* Opaque, and it must stay opaque — the rule above passes behind it. */
    background: var(--am-pink, #ff325a);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.am-cust-steps__title {
    margin-bottom: 8px;
    color: #111113;
    font-weight: 700;
    line-height: 1.3;
}

.am-cust-steps__body {
    max-width: 34ch;
    color: #55555f;
    line-height: 1.6;
}

/* Repeat of the banner CTAs between the steps and the product grid. The row
   itself carries a top margin for the hero, which is the wrong spacing here. */
.am-customize__cta .am-shopby-cta-row {
    margin: 34px 0 6px;
}

/* ------------------------------------------------------- Products -------- */

.am-cust-products {
    padding: 46px 0 10px;
}

/* Fluid track count rather than a fixed six: the number of customisable
   categories is whatever the catalogue happens to hold, so the row is allowed
   to find its own count and the tiles keep a sane minimum width at every
   width in between. */
.am-cust-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.am-cust-tile,
.am-cust-tile:visited {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f4f6;
    color: inherit;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Keyboard users get the same lift the mouse does — the tile leaves the site
   for WhatsApp, so it must be obvious which one is about to be opened. */
.am-cust-tile:focus-visible {
    outline: 2px solid var(--am-pink, #ff325a);
    outline-offset: 2px;
}

.am-cust-tile:hover,
.am-cust-tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(17, 17, 19, .14);
}

.am-cust-tile__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
}

.am-cust-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.am-cust-tile:hover .am-cust-tile__media img,
.am-cust-tile:focus-visible .am-cust-tile__media img {
    transform: scale(1.06);
}

/* A scrim instead of a solid bar: the name stays legible on pale and dark
   artwork alike while the picture keeps its full height. */
.am-cust-tile__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top,
        rgba(11, 11, 15, .82) 0%,
        rgba(11, 11, 15, .42) 45%,
        rgba(11, 11, 15, 0) 100%);
    pointer-events: none;
}

.am-cust-tile__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 12px 14px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    /* Long category names must not stack up into the artwork. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keeps the pink accent on the tile now that the label no longer carries it
   as a background. */
.am-cust-tile__name::before {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto 9px;
    background: var(--am-pink, #ff325a);
    transition: width .3s ease;
}

.am-cust-tile:hover .am-cust-tile__name::before,
.am-cust-tile:focus-visible .am-cust-tile__name::before {
    width: 46px;
}

@media (prefers-reduced-motion: reduce) {
    .am-cust-tile,
    .am-cust-tile__media img,
    .am-cust-tile__name::before {
        transition: none;
    }

    .am-cust-tile:hover {
        transform: none;
    }

    .am-cust-tile:hover .am-cust-tile__media img {
        transform: none;
    }
}

/* --------------------------------------------------- Testimonials ------- */

.am-cust-quotes {
    padding: 50px 0 20px;
}

.am-cust-quotes__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Stretch, so four quotes of very different length share one height and the
       row does not read as ragged. */
    align-items: stretch;
    gap: 18px;
}

.am-cust-quote {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 18px 18px 20px;
    border: 1px solid #e8e8ee;
    border-radius: 10px;
    background: #fff;
}

.am-cust-quote__mark {
    align-self: flex-end;
    color: var(--am-pink, #ff325a);
    font-size: 34px;
    font-weight: 800;
    line-height: .7;
}

.am-cust-quote__body {
    margin: 6px 0 0;
    color: #44444d;
    line-height: 1.65;
}

.am-cust-quote__body p {
    margin: 0 0 12px;
}

.am-cust-quote__body p:last-child {
    margin-bottom: 0;
}

/* Pushed to the card's foot so every attribution lines up across the row
   however long its quote is. */
.am-cust-quote__name {
    margin-top: auto;
    padding-top: 16px;
    color: var(--am-pink, #ff325a);
    font-weight: 700;
}

/* --------------------------------------------------- Breakpoints -------- */

@media (max-width: 1100px) {
    .am-cust-quotes__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .am-cust-features__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .am-cust-steps__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px 0;
        max-width: 520px;
        margin: 0 auto;
    }

    /* Stacked steps: a horizontal rule between columns is meaningless once there
       is one column, and a vertical one would have to thread past three
       illustrations of differing height. Dropped rather than rotated. */
    .am-cust-steps__item::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .am-cust__heading {
        margin-bottom: 22px;
    }

    .am-cust-features {
        padding-top: 26px;
    }

    .am-cust-features__list {
        gap: 22px 10px;
    }

    .am-cust-features__icon {
        width: 62px;
        height: 62px;
    }

    .am-cust-features__icon img {
        max-width: 34px;
        max-height: 34px;
    }

    /* Shorter illustrations on phones. Only the property is changed — the rule's
       offset is calc()'d from it, so it follows automatically. */
    .am-cust-steps {
        --am-cust-step-media-h: 150px;
    }

    .am-cust-products__grid {
        gap: 12px;
    }

    .am-cust-quotes__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .am-cust-quote {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    /* Two across, not one: at one the labels have room but the benefits row
       becomes six full-width rows of almost nothing. */
    .am-cust-features__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Below the 190px track minimum auto-fill would drop to a single column and
       the showcase would read as a list. Forced back to two across. */
    .am-cust-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   14. Dialogs — shop/cart/index, shop/checkout/index, and the shared #msgModal
   ==========================================================================

   The shop loads Bootstrap 3.3.6 JS (layouts/shop/includes/js.blade.php) and
   Bootstrap 5 CSS (bundled in adminlte; the shop's own bootstrap.css is
   commented out of the CSS list). The two disagree about how a dialog opens:

     BS3 JS       adds class `in` and an inline display:block
     BS5 CSS      reveals on `.show`, holds `.fade` at opacity:0,
                  and offsets `.modal.fade .modal-dialog` by -50px

   No stylesheet loaded on the storefront defines `.in`, so every Bootstrap
   modal here opened as a fully TRANSPARENT, position:fixed, full-screen layer:
   invisible, and swallowing every click behind it until Escape was pressed.
   That is what made the cart's remove button appear to do nothing.

   Two answers, deliberately different:

     - Storefront dialogs the shop owns are .am-modal below. No Bootstrap, so
       neither library can move under them again.
     - #msgModal is mainframe markup opened by mainframe JS from many places
       (validation.js loadMsg(), module forms). Rewriting it is an app-wide
       change, so the BS3 open state is simply given the rules BS5 never wrote.
       Scoped to `.in`, which BS5 itself never sets, so nothing else moves.
   ========================================================================== */

.modal.fade.in {
    opacity: 1;
}

.modal.fade.in .modal-dialog {
    transform: none;
}

/* BS5 leaves the backdrop's opacity to `.show`; BS3 sets `in`. Same value it
   would have used (--bs-backdrop-opacity). */
.modal-backdrop.fade.in {
    opacity: .5;
}

/* ------------------------------------------------- Storefront dialogs ---- */

/* The `hidden` attribute is the source of truth for visibility, so an
   .am-modal cannot end up open-but-invisible if this file fails to load —
   the exact failure mode above. */
.am-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Above the sticky header (1040) and the chat launcher (1030). */
    z-index: 1300;
}

.am-modal[hidden] {
    display: none;
}

.am-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 19, .5);
}

.am-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
    /* A long price-change list must scroll inside the dialog, not run off the
       viewport with its buttons below the fold. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.am-modal__title {
    margin: 0 0 10px;
    font-weight: 700;
    color: #111113;
}

.am-modal__body {
    margin: 0 0 22px;
    color: #4d4d50;
    line-height: 1.5;
}

.am-modal__body p {
    margin: 0 0 10px;
}

.am-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}