/*
 * Charles Francis Studio - shop skin
 *
 * The ecommerce plugin's storefront is Bootstrap 5 markup written for the
 * gallery. This sheet does not rewrite that markup; it maps it onto the studio
 * design system in assets/css/studio.css. Loaded ONLY on shop, cart, checkout
 * and account pages (templates/studio/header.php decides, on the body class).
 *
 * Load order matters and is fixed:
 *   bootstrap -> bootstrap-custom -> ecommerce frontend.css -> studio.css -> THIS FILE
 *
 * Why it exists at all: studio.css defines a bare `.btn`, and so does
 * Bootstrap. studio.css wins on order, so every Bootstrap button on a shop page
 * already inherits the studio button shape while keeping Bootstrap's colours.
 * Rather than fight that collision, the rules below finish it deliberately.
 */

/* ------------------------------------------------------------------ shell */

.studio .container,
.studio .container-fluid { max-width: var(--frame); }

.studio main > .container { padding-block: var(--s-7) var(--s-8); }

/* ---------------------------------------------------------------- buttons */

/* Bootstrap's colour classes, restated in studio tokens. The shape already
   comes from studio.css's own .btn. */
/* The shop's primary action is the same orange as every button on the
   marketing pages. It used to be ink with a gold hover, which was the gallery
   scheme; ink-on-orange failed contrast the moment orange became the action. */
.studio .btn-primary,
.studio .btn-dark {
    background: var(--action);
    border-color: var(--action);
    color: var(--paper);
}
.studio .btn-primary:hover,
.studio .btn-primary:focus,
.studio .btn-dark:hover {
    background: var(--action-dark);
    border-color: var(--action-dark);
    color: var(--paper);
}

.studio .btn-outline-primary,
.studio .btn-outline-secondary,
.studio .btn-outline-dark {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}
.studio .btn-outline-primary:hover,
.studio .btn-outline-secondary:hover,
.studio .btn-outline-dark:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.studio .btn-secondary {
    background: var(--slate);
    border-color: var(--slate);
    color: var(--paper);
}
.studio .btn-secondary:hover { background: var(--ink); border-color: var(--ink); }

.studio .btn-success { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.studio .btn-danger  { background: var(--alert); border-color: var(--alert); color: var(--paper); }

.studio .btn-link { text-transform: none; letter-spacing: 0; color: var(--ink); }

/* A disabled Add to Cart must read as unavailable, not as a second style. */
.studio .btn:disabled,
.studio .btn.disabled { opacity: .45; }

.studio .btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); }
.studio .btn-lg { padding: var(--s-4) var(--s-6); font-size: var(--t-base); }

/* ------------------------------------------------------------------ forms */

.studio .form-control,
.studio .form-select {
    font-family: var(--body);
    font-size: var(--t-base);
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--wall-deep);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
}
.studio .form-control:focus,
.studio .form-select:focus {
    border-color: var(--action);
    box-shadow: none;
    outline: 2px solid var(--action);
    outline-offset: -2px;
}
.studio .form-label {
    font-family: var(--body);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: var(--s-2);
}
.studio .form-text { font-size: var(--t-sm); color: var(--slate-soft); }
.studio .input-group-text { background: var(--wall); border-color: var(--wall-deep); }

/* The generous input padding above is right for a checkout field and wrong for
   a quantity stepper: it made the number box taller than the - and + buttons
   beside it, so the input hung below the group. Compact inside a group. */
.studio .input-group-sm > .form-control,
.studio .input-group-sm > .form-select {
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-sm);
}
.studio .input-group > .form-control,
.studio .input-group > .form-select { padding-block: var(--s-2); }
.studio .input-group .btn { padding: var(--s-2) var(--s-3); }

/* A number input in a stepper does not need browser spinners next to buttons
   that do the same job. */
.studio .ecommerce-cart-quantity::-webkit-outer-spin-button,
.studio .ecommerce-cart-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.studio .ecommerce-cart-quantity { -moz-appearance: textfield; appearance: textfield; }

/* ------------------------------------------------------------------ cards */

.studio .card {
    background: var(--paper);
    border: 1px solid var(--wall-deep);
    border-radius: var(--radius);
    box-shadow: none;
}
.studio .card-header { background: var(--wall); border-bottom-color: var(--wall-deep); }
.studio .card-title { font-family: var(--display); }

/* studio.css gives a.card display:flex for its own tiles; Bootstrap cards in
   the shop are blocks. */
.studio a.card { display: block; }

/* ------------------------------------------------------------- typography */

/* Shop headings run at a smaller scale than a marketing page. */
.studio main .container h1 { font-size: clamp(1.75rem, 3.5vw, var(--t-xl)); }
.studio main .container h2 { font-size: var(--t-lg); }
.studio main .container h3 { font-size: var(--t-md); }
.studio main .container h4,
.studio main .container h5,
.studio main .container h6 { font-size: var(--t-base); }

/* studio.css caps every paragraph at the reading measure. Inside a shop column
   that leaves a ragged half-width block. */
.studio .card p,
.studio .ecommerce-product-info p,
.studio .table p { max-width: none; }

.studio .text-muted { color: var(--slate-soft) !important; }

/* Prices are data, in the same face as the price list on the marketing pages. */
.studio .ecommerce-product-price,
.studio .ecommerce-price,
.studio .cart-item-price,
.studio .cart-total-value,
.studio .price-display {
    font-family: var(--data);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- breadcrumb */

.studio .breadcrumb {
    font-family: var(--body);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
}
.studio .breadcrumb a { color: var(--slate); text-decoration: none; }
.studio .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.studio .breadcrumb-item.active { color: var(--slate-soft); }

/* ----------------------------------------------------------------- badges */

.studio .badge.bg-light {
    background: var(--wall) !important;
    color: var(--slate) !important;
    font-family: var(--body);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    padding: var(--s-1) var(--s-2);
}

/* ------------------------------------------------------------------ table */

.studio .table { color: var(--ink); }
.studio .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--wall-deep); }
.studio .table thead th {
    font-family: var(--body);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate);
}

/* ----------------------------------------------------------------- alerts */

.studio .alert { border-radius: var(--radius); border-width: 1px; }
.studio .alert-info { background: var(--wall); border-color: var(--wall-deep); color: var(--ink); }
.studio .alert-success { background: #E8F0EA; border-color: var(--ok); color: #204B37; }
/* The warning border used to be the action colour. With the action colour now
   red, a red-bordered warning reads as a danger alert, so it takes the gold. */
.studio .alert-warning { background: #F6EFE2; border-color: var(--gold-ink); color: #5C4318; }
.studio .alert-danger { background: #F5E8E6; border-color: var(--alert); color: #6B2A20; }

/* ------------------------------------------------------------ shop listing */

/* The grid. Wide enough that three service tiles do not stretch to billboard
   size, narrow enough that a print grid stays dense. */
.studio .studio-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-7);
}

/* A tile is a sheet of paper on the wall. */
.studio a.scard {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--wall-deep);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.studio a.scard:hover {
    box-shadow: var(--lift-2);
    transform: translateY(-2px);
}

.studio .scard__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--wall);
    overflow: hidden;
}
.studio .scard__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.studio .scard__flag {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: var(--s-1) var(--s-2);
}

.studio .scard__body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1 1 auto;
}

/* A service has no picture, so the type does the work the image would have
   done: the name is set large and the tile is given room to breathe. */
.studio .scard--text .scard__body {
    padding: var(--s-6) var(--s-5);
    border-top: 3px solid var(--action);
}
.studio .scard--text .scard__name { font-size: var(--t-lg); }

.studio .scard__name {
    font-family: var(--display);
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
}
.studio .scard__blurb {
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
    max-width: none;
}
.studio .scard__price {
    font-family: var(--data);
    font-size: var(--t-base);
    font-variant-numeric: tabular-nums;
    margin: auto 0 0;
    padding-top: var(--s-3);
}
.studio .scard__from {
    font-family: var(--body);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slate-soft);
}

/* -------------------------------------------------- listing title and sort */

.studio .shop-title-bar {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--wall-deep);
}

/* Only above phone width. Below 576px frontend.css deliberately stacks this bar
   with align-items:flex-start, and a `.studio .shop-title-bar` rule outranks it
   (a media query adds no specificity) — which is what threw the heading over to
   the right-hand edge on a phone. */
@media (min-width: 36.0625rem) {
    .studio .shop-title-bar {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--s-4);
        flex-wrap: wrap;
    }
}
.studio .shop-page-title {
    font-family: var(--display);
    font-size: var(--t-xl);
    margin: 0;
}
.studio .ap-showing {
    font-family: var(--data);
    font-size: var(--t-sm);
    color: var(--slate-soft);
    margin-left: var(--s-3);
    letter-spacing: 0;
}

.studio .ecommerce-product-card {
    background: var(--paper);
    border: 1px solid var(--wall-deep);
    transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.studio .ecommerce-product-card:hover {
    box-shadow: var(--lift-2);
    transform: translateY(-2px);
}
.studio .ecommerce-product-card .card-title {
    font-family: var(--display);
    font-size: var(--t-md);
    letter-spacing: -.01em;
}

/* --------------------------------------------------------- product detail */

.studio .ecommerce-product-title {
    font-family: var(--display);
    font-size: clamp(1.875rem, 4vw, var(--t-2xl));
    letter-spacing: -.015em;
    line-height: 1.05;
    margin-bottom: var(--s-2);
}

.studio .ecommerce-product-main-image img { box-shadow: var(--lift-2); }

.studio .modal-content { background: var(--ground); border: 0; border-radius: var(--radius); }
.studio .modal-header,
.studio .modal-footer { border-color: var(--wall-deep); }

/* ------------------------------------------------------- cart and delivery */

/* frontend.css draws these tiles in a periwinkle (#667eea / #f0f2ff) that
   belongs to no part of this site. */
.studio .delivery-method-option {
    border: 1px solid var(--wall-deep);
    border-radius: var(--radius);
    background: var(--paper);
}
.studio .delivery-method-option:hover {
    border-color: var(--action);
    background: var(--wall);
}
.studio .delivery-method-option.selected {
    border-color: var(--action);
    background: var(--paper);
    box-shadow: inset 0 0 0 2px var(--action);
}

.studio .shipping-rate-option:hover { background: var(--wall); }

/* Cart line-item thumbnails: a service has no picture, so the tile must read as
   a deliberate blank rather than a failed image. */
.studio .ecommerce-cart-item img { border-radius: var(--radius); }

/* ---------------------------------------------------------- account pages */

/* A slim identity bar under the site header. It replaces the old "portal
   header" navbar, which carried the gallery's colours and a Back to Gallery
   link; the account sidebar already holds the navigation. */
.studio .acct-bar {
    background: var(--wall);
    border-bottom: 1px solid var(--wall-deep);
}
.studio .acct-bar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-3);
}
.studio .acct-bar__title {
    font-family: var(--display);
    font-size: var(--t-md);
    margin: 0;
}
.studio .acct-bar__user {
    font-family: var(--body);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.studio .acct-return {
    padding-block: var(--s-5) var(--s-7);
    font-size: var(--t-sm);
}

/* The sidebar's active item is a Bootstrap .list-group-item.active, which is
   blue by default. */
.studio .list-group-item.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.studio .list-group-item.active a { color: var(--paper); }
.studio .list-group-item { background: transparent; border-color: var(--wall-deep); }

.studio .dropdown-menu {
    background: var(--paper);
    border: 1px solid var(--wall-deep);
    border-radius: var(--radius);
}
.studio .dropdown-item:hover { background: var(--wall); }

/* ------------------------------------------------------------------- misc */

/* Bootstrap utility backgrounds read as holes against the warm ground. */
.studio .bg-light { background-color: var(--wall) !important; }
.studio .bg-white { background-color: var(--paper) !important; }

.studio hr { border-color: var(--wall-deep); opacity: 1; }

/* Customer account navigation: keep the page task visible on narrow screens. */
.studio .account-mobile-menu { display: none; }
.studio .account-logout { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; text-align: left; cursor: pointer; width: 100%; }
.studio .account-logout:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.studio .account-mobile-menu .account-logout { padding: 10px 8px; }
.studio .account-navigation .list-group-item.active {
    background: #29483e !important;
    border-color: #29483e !important;
}
.studio .account-navigation .list-group-item.active a { color: #fff !important; }
.studio .acct-bar__user { overflow-wrap: anywhere; }
.studio .account-legal-document { overflow-wrap: anywhere; }
.studio.page-legal .card-body { overflow-x: auto; }
@media (max-width: 991.98px) {
    .studio .account-desktop-menu { display: none; }
    .studio .account-mobile-menu { display: block; border: 1px solid var(--wall-deep); background: var(--paper); }
    .studio .account-mobile-menu summary { padding: 12px 16px; cursor: pointer; font-weight: 600; }
    .studio .account-mobile-menu nav { display: grid; padding: 0 8px 8px; }
    .studio .account-mobile-menu a { padding: 10px 8px; color: var(--ink); }
    .studio .account-mobile-menu a[aria-current] { background: #29483e; color: #fff; }
    .studio .account-mobile-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

/* Member pages share the studio palette and keep their own navigation. */
.studio.ecommerce-account .site-head__utility { margin-left: auto; }
.studio #addressTabs .address-count {
    background: var(--wall);
    color: var(--ink);
    border: 1px solid var(--wall-deep);
    border-radius: 999px;
    font-weight: 600;
    min-width: 1.6rem;
}
.studio #addressTabs .active .address-count {
    background: var(--paper);
    color: var(--ink);
}
.studio .account-contact-content { min-width: 0; }
.studio .account-contact-content .v2-form { max-width: none; }
.studio .account-contact-content .paper { border: 1px solid var(--wall-deep); }