/*
 * Aristom — Single Product CSS v2.0
 * Desktop: matches desktop HTML reference
 * Mobile: matches mobile HTML reference
 */

:root {
    --ar-red:      #A81E24;
    --ar-red-dark: #7a1619;
    --ar-red-soft: #FBECEC;
    --ar-ink:      #0F0F10;
    --ar-ink-2:    #3A3A3D;
    --ar-muted:    #7A7B80;
    --ar-line:     #ECECEE;
    --ar-bg:       #fff;
    --ar-bg-2:     #FAFAFA;
    --ar-img-bg:   #ffffff;
    --ar-radius:   14px;
    --ar-shadow:   0 1px 2px rgba(15,15,16,.04), 0 8px 24px rgba(15,15,16,.06);
}

/* ── Breadcrumb ── */
.ar-pdp-crumbs {
    padding:       14px 28px;
    border-bottom: 1px solid var(--ar-line);
    background:    var(--ar-bg);
}
.ar-pdp-crumbs nav {
    display:     flex;
    flex-wrap:   wrap;
    gap:         5px;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size:   12.5px;
    color:       var(--ar-muted);
    max-width:   1280px;
    margin:      0 auto;
}
.ar-pdp-crumbs a       { color: var(--ar-muted); text-decoration: none; transition: color .15s; }
.ar-pdp-crumbs a:hover { color: var(--ar-ink); }
.ar-pdp-crumbs .sep    { opacity: .4; }
.ar-pdp-crumbs .here   { color: var(--ar-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ── PDP layout ── */
.ar-pdp {
    display:               grid;
    grid-template-columns: 1.1fr .9fr;
    gap:                   56px;
    padding:               36px 28px 56px;
    max-width:             1280px;
    margin:                0 auto;
    box-sizing:            border-box;
    align-items:           start;
}

/* ── Gallery — Desktop ── */
.ar-gal {
    display:               grid;
    grid-template-columns: 80px 1fr;
    gap:                   14px;
    position:              sticky;
    top:                   80px;
}

.ar-thumbs {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.ar-thumb {
    border:          1px solid var(--ar-line);
    border-radius:   10px;
    aspect-ratio:    1;
    background:      var(--ar-img-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    overflow:        hidden;
    transition:      border-color .15s;
    flex-shrink:     0;
}
.ar-thumb.active { border-color: var(--ar-ink); }
.ar-thumb:hover  { border-color: var(--ar-ink-2); }
.ar-thumb img    { width: 90%; height: 90%; object-fit: contain; display: block; }

.ar-main-img {
    background:      var(--ar-img-bg);
    border-radius:   18px;
    aspect-ratio:    1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
}
.ar-main-img img {
    width:      80%;
    height:     80%;
    object-fit: contain;
    display:    block;
    transition: opacity .2s;
}
.ar-main-tag {
    position:      absolute;
    top:           16px;
    left:          16px;
    background:    var(--ar-red);
    color:         #fff;
    font-family:   'Inter', sans-serif;
    font-size:     11px;
    font-weight:   700;
    letter-spacing: .1em;
    padding:       5px 11px;
    border-radius: 999px;
    z-index:       2;
}
.ar-nav-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      #fff;
    border:          1px solid var(--ar-line);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         2;
    transition:      border-color .15s, box-shadow .15s;
}
.ar-nav-arrow:hover { border-color: var(--ar-ink); box-shadow: var(--ar-shadow); }
.ar-nav-arrow.l { left: 14px; }
.ar-nav-arrow.r { right: 14px; }
.ar-nav-arrow svg { width: 14px; height: 14px; }

/* ── Info panel ── */
.ar-info { display: flex; flex-direction: column; }

.ar-info-brand {
    font-family:    'Inter', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .14em;
    color:          var(--ar-red);
    text-transform: uppercase;
    margin-bottom:  8px;
}

.ar-info h1 {
    font-family:    'Inter', sans-serif;
    margin:         0 0 10px;
    font-size:      28px;
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: -.015em;
    color:          var(--ar-ink);
}

/* ── SKU copyable chip ── */
.ar-sku-wrap {
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-wrap:     wrap;
    margin-bottom: 16px;
}
.ar-barcode {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-family: 'Inter', sans-serif;
    font-size:   11px;
    color:       var(--ar-muted);
}
.ar-barcode svg { opacity: .5; flex-shrink: 0; }
.ar-sku-chip {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      var(--ar-bg-2);
    border:          1px solid var(--ar-line);
    border-radius:   999px;
    padding:         4px 10px;
    font-family:     'Inter', sans-serif;
    font-size:       11.5px;
    font-weight:     600;
    color:           var(--ar-muted);
    cursor:          pointer;
    transition:      all .15s;
    letter-spacing:  .02em;
}
.ar-sku-chip:hover  { border-color: var(--ar-ink); color: var(--ar-ink); background: #fff; }
.ar-sku-chip.copied { border-color: #43A047; color: #43A047; background: #EAF4E1; }
.ar-sku-copy-icon,
.ar-sku-check-icon  { flex-shrink: 0; }

/* Related products — no border, plain inline */
.ar-rel-card-body .ar-sku-chip {
    background:   transparent;
    border:       none;
    padding:      0;
    font-size:    11px;
    color:        var(--ar-muted);
    margin-bottom: 4px;
}
.ar-rel-card-body .ar-sku-chip:hover { background: transparent; border: none; color: var(--ar-ink); }

/* Price */
.ar-price-big {
    margin-bottom: 4px;
}
.ar-price-big .price {
    font-family:    'Inter', sans-serif !important;
    font-size:      30px !important;
    font-weight:    800 !important;
    color:          var(--ar-ink) !important;
    letter-spacing: -.01em !important;
    display:        flex !important;
    align-items:    baseline !important;
    gap:            10px !important;
    flex-wrap:      wrap !important;
}
.ar-price-big .price ins  { text-decoration: none !important; }
.ar-price-big .price del  { font-size: 15px !important; color: var(--ar-muted) !important; font-weight: 400 !important; text-decoration: line-through !important; }
.ar-price-big .price bdi  { display: flex; align-items: baseline; gap: 3px; }

.ar-vat {
    font-family:   'Inter', sans-serif;
    color:         var(--ar-muted);
    font-size:     11.5px;
    margin-bottom: 20px;
}

/* Login prompt */
.ar-info .aristom-login-for-price {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      var(--ar-red-soft);
    color:           var(--ar-red);
    font-family:     'Inter', sans-serif;
    font-size:       14px;
    font-weight:     600;
    padding:         12px 20px;
    border-radius:   999px;
    border:          1px solid rgba(168,30,36,0.2);
    cursor:          pointer;
    margin-bottom:   20px;
    transition:      all .18s;
    text-decoration: none;
}
.ar-info .aristom-login-for-price:hover { background: var(--ar-red); color: #fff; }

/* Variations */
.ar-variations-wrap { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.ar-var-row { display: flex; flex-direction: column; gap: 5px; }
.ar-var-row label {
    font-family:    'Inter', sans-serif;
    font-size:      11px;
    font-weight:    600;
    color:          var(--ar-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ar-var-row select {
    border:        1px solid var(--ar-line);
    border-radius: 999px;
    padding:       9px 16px;
    font-family:   'Inter', sans-serif;
    font-size:     13.5px;
    color:         var(--ar-ink);
    background:    #fff;
    outline:       none;
    cursor:        pointer;
    width:         100%;
    transition:    border-color .15s;
    appearance:    auto;
}
.ar-var-row select:focus { border-color: var(--ar-ink); }

/* Specs — compact 2-col grid */
.ar-specs {
    border-top:    1px solid var(--ar-line);
    padding-top:   18px;
    margin-bottom: 20px;
}
.ar-specs h4 {
    font-family:    'Inter', sans-serif;
    margin:         0 0 12px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--ar-ink);
}

/* Override WooCommerce spec table with compact grid */
.ar-spec-content table,
.ar-spec-content .spec-grid { display: none; } /* hide if using WC table format */

/* Compact spec grid — matches reference */
.ar-specgrid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 24px;
    font-family:           'Inter', sans-serif;
    font-size:             12px;
    line-height:           1.3;
}
.ar-specgrid > div {
    display:         flex;
    justify-content: space-between;
    padding:         5px 0;
    border-bottom:   1px dashed var(--ar-line);
}
.ar-specgrid > div span:first-child { color: var(--ar-muted); flex-shrink: 0; padding-right: 8px; }
.ar-specgrid > div span:last-child  { color: var(--ar-ink); font-weight: 500; text-align: right; }

/* Fallback for raw short description HTML */
.ar-spec-content {
    font-family: 'Inter', sans-serif;
    font-size:   12.5px;
    color:       var(--ar-ink-2);
}
.ar-spec-content table { width: 100%; border-collapse: collapse; display: table; }
.ar-spec-content td    { padding: 5px 8px; border-bottom: 1px dashed var(--ar-line); font-size: 12.5px; vertical-align: top; }
.ar-spec-content td:first-child { color: var(--ar-muted); width: 45%; }
.ar-spec-content td:last-child  { color: var(--ar-ink); font-weight: 500; }

/* Qty + buy row — desktop */
.ar-qtybuy {
    display:               grid;
    grid-template-columns: 130px 1fr 1fr;
    gap:                   10px;
    margin-bottom:         16px;
    align-items:           center;
}
.ar-qty {
    border:          1px solid var(--ar-line);
    border-radius:   999px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 8px;
    height:          50px;
    background:      #fff;
}
.ar-qty button {
    border:          none;
    background:      transparent;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    font-size:       18px;
    cursor:          pointer;
    color:           var(--ar-ink-2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s;
    line-height:     1;
}
.ar-qty button:hover { background: var(--ar-bg-2); }
.ar-qty input {
    border:      none;
    text-align:  center;
    width:       34px;
    font-family: 'Inter', sans-serif;
    font-size:   15px;
    font-weight: 600;
    background:  transparent;
    outline:     none;
    color:       var(--ar-ink);
}

.ar-btn-cart {
    background:      var(--ar-ink);
    color:           #fff;
    border:          none;
    border-radius:   999px;
    font-family:     'Inter', sans-serif;
    font-weight:     600;
    font-size:       14px;
    height:          50px;
    cursor:          pointer;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    transition:      background .18s;
    padding:         0 16px;
}
.ar-btn-cart:hover    { background: var(--ar-red); }
.ar-btn-cart:disabled { opacity: .5; cursor: not-allowed; }

.ar-btn-buy {
    background:  var(--ar-red);
    color:       #fff;
    border:      none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size:   14px;
    height:      50px;
    cursor:      pointer;
    width:       100%;
    transition:  background .18s;
}
.ar-btn-buy:hover { background: var(--ar-red-dark); }

/* Perks */
.ar-perks {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px 16px;
    padding:               16px 18px;
    background:            var(--ar-bg-2);
    border-radius:         var(--ar-radius);
    font-family:           'Inter', sans-serif;
    font-size:             12.5px;
    color:                 var(--ar-ink-2);
    margin-top:            14px;
}
.ar-perks div { display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.ar-perks svg { width: 14px; height: 14px; color: var(--ar-red); flex-shrink: 0; }

/* ── Description tab — above related products, matches screenshot ── */
.ar-desc-tab {
    width:      100% !important;
    background: #fff !important;
    border-top: 1px solid #ECECEE !important;
    display:    block !important;
    box-sizing: border-box !important;
}
.ar-desc-tab-inner {
    max-width:  1280px !important;
    margin:     0 auto !important;
    padding:    28px 28px 40px !important;
    box-sizing: border-box !important;
    display:    block !important;
}
.ar-desc-tab-header {
    margin-bottom:  20px !important;
    padding-bottom: 14px !important;
    border-bottom:  1px solid #ECECEE !important;
    display:        block !important;
}
.ar-desc-tab-label {
    font-family:    'Inter', sans-serif !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color:          #7A7B80 !important;
    display:        block !important;
    line-height:    1 !important;
}
.ar-desc-tab-content {
    font-family: 'Inter', sans-serif !important;
    font-size:   15px !important;
    color:       #3A3A3D !important;
    line-height: 1.75 !important;
    max-width:   780px !important;
    display:     block !important;
}
.ar-desc-tab-content p {
    margin:      0 !important;
    font-size:   15px !important;
    line-height: 1.75 !important;
    color:       #3A3A3D !important;
    font-family: 'Inter', sans-serif !important;
}

/* Hide old containers */
.ar-pdp-description,
.ar-info-desc { display: none !important; }

@media (max-width: 768px) {
    .ar-desc-tab-inner { padding: 20px 16px 32px !important; }
    .ar-desc-tab-content { font-size: 14px !important; }
    .ar-desc-tab-content p { font-size: 14px !important; }
}

/* ── Related products ── */
.ar-related { border-top: 1px solid var(--ar-line); padding: 48px 28px; }
.ar-related-inner { max-width: 1280px; margin: 0 auto; }
.ar-related-head { margin-bottom: 24px; }
.ar-related-head h2 {
    font-family:    'Inter', sans-serif;
    font-size:      24px;
    font-weight:    700;
    letter-spacing: -.015em;
    color:          var(--ar-ink);
    margin:         0 0 4px;
}
.ar-related-head p { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--ar-muted); margin: 0; }

.ar-related-grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   18px;
}

.ar-rel-card {
    background:      #fff;
    border:          1px solid var(--ar-line);
    border-radius:   var(--ar-radius);
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
    display:         flex;
    flex-direction:  column;
    transition:      border-color .18s, box-shadow .18s, transform .18s;
}
.ar-rel-card:hover { border-color: var(--ar-ink); box-shadow: var(--ar-shadow); transform: translateY(-2px); }
.ar-rel-card-img {
    aspect-ratio:    1;
    background:      var(--ar-img-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.ar-rel-card-img img { width: 78%; height: 78%; object-fit: contain; display: block; }
.ar-rel-card-body    { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }

/* Brand + SKU same row on related cards */
.ar-rel-card-body .ar-card-meta-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   4px;
    gap:             6px;
}
.ar-rel-card-body .ar-card-meta-row .ar-rel-card-brand { margin-bottom: 0; flex: 1; }
.ar-rel-card-body .ar-card-meta-row .ar-sku-chip       { flex-shrink: 0; margin-bottom: 0; }
.ar-rel-card-brand   { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ar-muted); margin-bottom: 4px; }
.ar-rel-card-name    { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ar-ink); line-height: 1.3; margin: 0 0 auto; padding-bottom: 10px; }
.ar-rel-card-row     { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ar-rel-card-price   { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--ar-ink); }
.ar-rel-card-price .woocommerce-Price-currencySymbol { font-size: 11px; font-weight: 500; color: var(--ar-muted); }
.ar-rel-card-add {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--ar-ink);
    color:           #fff;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       18px;
    line-height:     1;
    transition:      background .15s;
    flex-shrink:     0;
}
.ar-rel-card-add:hover { background: var(--ar-red); }

/* ── MOBILE STICKY BUY BAR ── */
.ar-pbuy {
    display:    none !important; /* hidden on desktop, shown only on mobile via media query */
}


/* ── Variation thumbnail dot ── */
.ar-thumb--var { position: relative; }
.ar-thumb-dot {
    position:      absolute;
    bottom:        4px;
    right:         4px;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        1.5px solid #fff;
    box-shadow:    0 0 0 1px rgba(0,0,0,.1);
}

/* ── Color swatches — product page ── */
.ar-swatches-wrap {
    margin-bottom: 20px;
}
.ar-swatches-label {
    font-family:   'Inter', sans-serif;
    font-size:     12px;
    color:         var(--ar-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight:   500;
}
.ar-swatches-label b {
    color:       var(--ar-ink);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size:   13px;
    margin-left: 2px;
}
.ar-swatches {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.ar-swatch {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    border:        2px solid #fff;
    box-shadow:    0 0 0 1.5px #ddd;
    cursor:        pointer;
    transition:    box-shadow .15s, transform .15s;
    flex-shrink:   0;
    padding:       0;
    outline:       none;
    position:      relative;
}
.ar-swatch:hover {
    transform:  scale(1.12);
    box-shadow: 0 0 0 2px var(--ar-red);
}
.ar-swatch.active {
    box-shadow: 0 0 0 2.5px var(--ar-red);
    transform:  scale(1.08);
}
/* White/light swatches need border */
.ar-swatch[style*="#FFFFFF"],
.ar-swatch[style*="#ffffff"],
.ar-swatch[style*="#F5F0E8"],
.ar-swatch[style*="#f5f0e8"] {
    box-shadow: 0 0 0 1.5px #bbb;
}
.ar-swatch.active[style*="#FFFFFF"],
.ar-swatch.active[style*="#F5F0E8"] {
    box-shadow: 0 0 0 2.5px var(--ar-red);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .ar-pdp         { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px 48px; }
    .ar-gal         { position: static; }
    .ar-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ar-related      { padding: 36px 20px; }
    .ar-pdp-description { padding: 28px 20px; }
}

@media (max-width: 768px) {
    /* Switch gallery to mobile layout:
       Full-width main image + horizontal thumb strip below */
    .ar-gal {
        display:        flex;
        flex-direction: column;
        gap:            10px;
    }
    .ar-thumbs {
        flex-direction: row;
        overflow-x:     auto;
        gap:            8px;
        padding-bottom: 4px;
        order:          2; /* thumbs below main image */
        scrollbar-width: none;
    }
    .ar-thumbs::-webkit-scrollbar { display: none; }
    .ar-thumb {
        flex:           0 0 56px;
        height:         56px;
        border-radius:  10px;
        width:          56px;
    }
    .ar-main-img {
        order:         1;
        border-radius: 18px;
        width:         100%;
    }

    .ar-info h1     { font-size: 20px; }
    .ar-specgrid    { grid-template-columns: 1fr; }
    .ar-perks       { grid-template-columns: 1fr; gap: 8px; }

    /* Hide desktop qty+buy — show sticky bar instead */
    .ar-qtybuy { display: none; }
    .ar-pbuy {
        display:     flex;
        position:    fixed;
        bottom:      0;
        left:        0;
        right:       0;
        background:  #fff;
        border-top:  1px solid var(--ar-line);
        padding:     12px 18px calc(12px + env(safe-area-inset-bottom));
        gap:         10px;
        align-items: center;
        z-index:     100;
        box-shadow:  0 -4px 20px rgba(15,15,16,.06);
    }
    .ar-pbuy-qty {
        border:          1px solid var(--ar-line);
        border-radius:   999px;
        display:         flex;
        align-items:     center;
        padding:         0 6px;
        height:          44px;
        gap:             2px;
        flex-shrink:     0;
        background:      #fff;
    }
    .ar-pbuy-qty button {
        border:      none;
        background:  transparent;
        width:       26px;
        height:      26px;
        font-size:   16px;
        cursor:      pointer;
        color:       var(--ar-ink-2);
        display:     flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    .ar-pbuy-qty input {
        border:      none;
        text-align:  center;
        width:       24px;
        font-family: 'Inter', sans-serif;
        font-size:   14px;
        font-weight: 600;
        background:  transparent;
        outline:     none;
        color:       var(--ar-ink);
    }
    .ar-pbuy-cart {
        flex:            1;
        background:      var(--ar-ink);
        color:           #fff;
        border:          none;
        border-radius:   999px;
        height:          44px;
        font-family:     'Inter', sans-serif;
        font-weight:     600;
        font-size:       13px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             7px;
        cursor:          pointer;
        transition:      background .18s;
    }
    .ar-pbuy-cart:hover    { background: var(--ar-red); }
    .ar-pbuy-cart svg      { width: 14px; height: 14px; }
    .ar-pbuy-buy {
        background:  var(--ar-red);
        color:       #fff;
        border:      none;
        border-radius: 999px;
        height:      44px;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size:   13px;
        padding:     0 16px;
        cursor:      pointer;
        transition:  background .18s;
        flex-shrink: 0;
    }
    .ar-pbuy-buy:hover { background: var(--ar-red-dark); }

    /* Add bottom padding so content not hidden behind sticky bar */
    .ar-pdp { padding-bottom: 90px; }

    .ar-related-head h2 { font-size: 18px; }
    .ar-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ar-related { padding: 24px 16px 80px; }
    .ar-pdp { padding: 0 0 90px; }
    .ar-pdp-crumbs { padding: 10px 16px; }
    .ar-pdp-description { padding: 20px 16px; display: none; } /* hidden on mobile like reference */
}

@media (max-width: 480px) {
    .ar-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ar-rel-card-body { padding: 10px 12px 12px; }
    .ar-rel-card-name { font-size: 12px; }
}