@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

   NOT merged, deliberately: the eshop template's vendor CSS (style.css,
   responsive.css, magnific-popup, fancybox, themify-icons, font-awesome,
   owl-carousel, 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.

   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;
}

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;
}

.am-no-scroll {
    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;
}

/* 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;
}

.am-drawer__item > a,
.am-drawer__item > a:visited,
.am-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    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 {
    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__caret {
    transform: rotate(-135deg);
}

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

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

.am-drawer__sub a,
.am-drawer__sub a:visited {
    display: block;
    padding: 11px 18px 11px 32px;
    color: var(--am-muted);
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
}

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

/* Tablet — let the link row scroll horizontally rather than wrap */
@media (max-width: 1100px) {
    .am-nav__list {
        justify-content: flex-start;
        gap: 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .am-nav__list::-webkit-scrollbar {
        display: none;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .am-burger {
        display: flex;
    }

    .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;
        margin: 0 14px 12px;
    }

    .am-actions {
        gap: 12px;
    }

    .am-btn {
        height: 34px;
        padding: 0 16px;
    }

    /* Desktop link row + mega menu are replaced by the drawer */
    .am-nav {
        display: none;
    }
}

/* 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;
    }

    .am-action {
        font-size: 19px;
    }

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

    .am-search--mobile {
        margin: 0 10px 10px;
    }
}


/* ==========================================================================
   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);
}

/* ----------------------------------------------------------- Track ------- */

.am-hero__track {
    display: flex;
    width: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.am-hero__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: block;
    text-decoration: none;
}

.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;
}

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

.am-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.am-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 19, .26);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease, width .2s ease;
}

.am-hero__dot:hover {
    background: rgba(17, 17, 19, .5);
}

.am-hero__dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: #111113;
}

/* ------------------------------------------- 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 {
        bottom: 8px;
        gap: 6px;
    }

    .am-hero__dot {
        width: 7px;
        height: 7px;
    }

    .am-hero__dot.is-active {
        width: 16px;
        border-radius: 4px;
    }

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

@media (prefers-reduced-motion: reduce) {
    .am-hero__track {
        transition: none;
    }
}


/* ==========================================================================
   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,
.am-btn-dark:focus {
    background: #000;
    color: #fff;
}

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

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

.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;
}

/* ------------------------------------------- Create CTA + review --------- */

.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-create__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.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;
}

.am-btn-outline:hover {
    border-color: #111113;
    background: #fafafa;
}

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

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

/* Review card, with a stacked-paper effect behind it */

.am-review {
    position: relative;
}

.am-review::before,
.am-review::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #d6d6da;
    background: #fff;
    border-radius: 2px;
}

.am-review::before {
    transform: translate(14px, -14px);
}

.am-review::after {
    transform: translate(7px, -7px);
}

.am-review__card {
    position: relative;
    z-index: 1;
    padding: 22px 24px;
    border: 1px solid #111113;
    border-radius: 2px;
    background: #fff;
}

.am-review__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

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

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

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

.am-review__name {
    font-size: 15px;
    font-weight: 700;
    color: #111113;
}

.am-review__stars {
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--artemis-red, #ff325a);
}

.am-review__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111113;
}

.am-review__body {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #4d4d50;
}

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

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

.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: 20px 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;
}

/* ------------------------------------------------ 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 --------- */

@media (max-width: 1199px) {
    .am-merch__grid,
    .am-cat__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    /* Create CTA stacks; the review card 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 */
    .am-featgrid {
        grid-template-columns: repeat(4, 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,
    .am-create__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;
    }

    /* Drop the stacked-paper layers — no room for the offset on a phone */
    .am-review::before,
    .am-review::after {
        display: none;
    }

    .am-review__card {
        padding: 18px 16px;
    }

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

    .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;
    }

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

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

    .am-merch__grid {
        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;
}

/* -------------------------------------------------- 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;
}

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

.am-cart__continue {
    margin-top: 10px;
    gap: 8px;
}

/* 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;
}

.am-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    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;
}

.am-checkout__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #ececef;
}

.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;
}

/* 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;
}

@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;
        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;
    }
}